CSS border-style Property

CSS border-style property sets the style for the border like solid line, double line, dotted line, etc.

border-style property can be set with the values from the following predefined values. The table provides the values, descriptions, and examples for each of them.

ValueDescriptionExample
noneNo border.border-style: none;
hiddenSame as “none”.except in border conflict resolution for table elementsborder-style: hidden;
dottedA dotted borderborder-style: dotted;
dashedA dashed borderborder-style: dashed;
solidA solid borderborder-style: solid;
doubleA double borderborder-style: double;
grooveA 3D grooved border.border-style: groove;
ridgeA 3D ridged border.border-style: ridge;
insetSpecifies a 3D inset border.border-style: inset;
outsetSpecifies a 3D outset border.border-style: outset;
initialSets this property to its default value.border-style: initial;
inheritInherits this property from its parent element.border-style: inherit;

none is the default value to border-style property.

border-style for the four borders: top, right, bottom, and left; of HTML Element(s) can be specified in different ways based on the number of values we provide to this property.

border-style with four values

border-style: solid dotted dashed double;
           /*  top  right  bottom left   */

border-style with three values

border-style: solid dotted dashed;
           /*  top  right  bottom   */
           /*       left            */

border-style with two values

border-style: solid    dotted;
           /*  top     right           */
           /*  bottom  left            */

border-style with three values

border-style: solid;
           /*  top      */
           /*  right    */
           /*  bottom   */
           /*  left     */

border-style with different number of values

In the following example, we specify border-style for four div elements with different number of values.

Example

ADVERTISEMENT

border-style with different values

In the following example, we set border-style of different div elements with different allowed values for border-style.

Example

Conclusion

In this CSS Tutorial, we learned about border-style property, and how to use this property for HTML Elements, with examples.