border-style – CSS: Cascading Style Sheets

The border-style shorthand CSS property sets the line style for all four sides of an element’s border.

This property is a shorthand for the following CSS properties:

border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; border-style: dotted solid; border-style: hidden double dashed; border-style: none solid dotted dashed; border-style: inherit; border-style: initial; border-style: unset;

The border-style property may be specified using one, two, three, or four values.

  • When one value is specified, it applies the same style to all four sides.
  • When two values are specified, the first style applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).

Each value is a keyword chosen from the list below.

Values

Describes the style of the border. It can have the following values:

none Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed. hidden Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won’t be displayed. dotted Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side’s border-width. dashed Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. solid Displays a single, straight, solid line. double Displays two straight lines that add up to the pixel size defined by border-width. groove Displays a border with a carved appearance. It is the opposite of ridge. ridge Displays a border with an extruded appearance. It is the opposite of groove. inset Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove. outset Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge. {1,4}

where = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

All property values

Here is an example of all the property values.

HTML

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

CSS

pre { height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; } .b1 { border-style: none; } .b2 { border-style: hidden; } .b3 { border-style: dotted; } .b4 { border-style: dashed; } .b5 { border-style: solid; } .b6 { border-style: double; } .b7 { border-style: groove; } .b8 { border-style: ridge; } .b9 { border-style: inset; } .b10 { border-style: outset; }

Result

BCD tables only load in the browser

Source

Leave a comment

Your email address will not be published. Required fields are marked *