Jump to content

border-style issues with "thin" width


Eep²

Recommended Posts

W3 Schools' Try-It-Yourself example for the CSS border-style property doesn't address border widths, which are inconsistent when using the "thin" border-width attribute (unfortunately, this board doesn't allow HTML/CSS formatting in posts so you'll have to copy-paste this into a Try-It-Yourself textarea or wherever):

Normal:<p style="border: dotted">A dotted border</p><p style="border: dashed">A dashed border</p><p style="border: solid">A solid border</p><p style="border: double">A double border</p><p style="border: groove">A groove border</p><p style="border: ridge">A ridge border</p><p style="border: inset">An inset border</p><p style="border: outset">An outset border</p>Thin:<p style="border: dotted thin">A dotted border</p><p style="border: dashed thin">A dashed border</p><p style="border: solid thin">A solid border</p><p style="border: double thin">A double border</p><p style="border: groove thin">A groove border</p><p style="border: ridge thin">A ridge border</p><p style="border: inset thin">An inset border</p><p style="border: outset thin">An outset border</p>Mixed:<p style="border: dotted thin">A dotted border</p><p style="border: dashed thin">A dashed border</p><p style="border: solid thin">A solid border</p><p style="border: double">A double border</p><p style="border: groove">A groove border</p><p style="border: ridge">A ridge border</p><p style="border: inset thin">An inset border</p><p style="border: outset thin">An outset border</p>

As you can see (when rendered properly), the double, groove, and ridge properties don't render when the thin attribute is set.This should be mentioned on the W3 Schools border-style (and border-width) pages.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...