<!DOCTYPE html> <html> <head> <title>CSS Borders: border-left-width: thin equals 1px</title> <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width"> <link rel="match" href="reference/border-right-width-1px-ref.html"> <meta name="assert" content="The 'thin' keyword for 'border-left-width' is 1px." /> <style> div { display: inline-block; height: 100px; } .red-if-too-thin { width: 1px; background: red; } .cb { position: relative; } .red-if-too-thick { width: 20px; background: red; } .overlap-red-if-too-thick { width: 20px; background: white; position: absolute; left: 0; } .border-test { border-left-style: solid; border-left-width: thin; margin-left: -1px; } </style> </head> <body> <p>There should be a black line below and no red.</p> <div class=red-if-too-thin></div><!-- --><div class=cb><!-- --><div class=border-test></div><!-- --><div class=red-if-too-thick></div><!-- --><div class=overlap-red-if-too-thick></div><!-- --></div> </body> </html>