border-style

The border-style property defines the styles of the borders of the element.

• CSS 1
• CSS 2
• CSS 3

border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | inherit

• none
  No border displayed.
• dotted
  A dotted line drawn above the background.
• dashed
  A dashed line drawn above the background.
• solid
  A solid line.
• double
  A double line drawn above the background. The sum of the two single lines and the space between is the value of the border-width.
• inherit
  The element should have the same border-style setting as the parent.

• groove
  A 3-D groove drawn in colors based on the color property.
• ridge
  A 3-D ridge drawn in colors based on the color property.
• inset
  A 3-D inset drawn in colors based on the color property in separated borders model (CSS 2). Same as ridge in collapsing borders model.

• outset
  A 3-D outset drawn in colors based on the color property in separated borders model (CSS 2). Same as groove in collapsing borders model.
• hidden
  Same as none, but in the collapsing border model inhibits any other border (CSS 2).

none.

border-style Applies To

All elements.

This property is not inherited.

• Netscape 6, 7
• Mozilla 1
• Firefox 1
• Internet Explorer 4, 5, 6
• Opera 3, 4, 5, 6, 7, 8
• Safari 1

standard border-style

<p style="border-style : solid;">
This paragraph has a solid border.
</p>

• CSS1 allows user-agents to display all values other than "solid" as "solid".

More border-style Information

• Borders - Dress Up the Edges of Your Elements
• Sample Borders
• border
• border-color
• border-width

Return to the Style Library