CSS border-style Property

CSS border-style property is used to set the style of all four sides of an element’s border in a single declaration. It is a shorthand of the below four properties:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

The border-style property can accept one, two, three, or four values at a time. The different number of values specified to the border-style property affects each border side differently. Let’s discuss each:

If only one value is specified:

• border-style: val;

The same style applies to all four sides of the border. Refer to the example below:

Example:

h1{
  border-style: solid;
}

If two values are specified:

• border-style: val1 val2;

The first value(val1) applies to the top and bottom borders and the second value(val2) applies to the left and right borders. Refer to the example below:

Example:

h1{
  border-style: solid dashed;
}

If three values are specified:

• border-style: val1 val2 val3;

The first value(val1) applies to the top border, the second value(val2) applies to the left and right borders and the third value(val3) applies to the bottom border of the element. Refer to the example below:

Example:

h1{
  border-style: solid dashed dotted;
}

If four values are specified:

• border-style: val1 val2 val3 val4;

The first value(val1) applies to the top border, the second value(val2) applies to the right border, the third value(val3) applies to the bottom border and the fourth value applies to the left border of the element. Refer to the example below:

Example:

h1{
  border-style: solid dashed dotted double;
}

CSS has several border styles available. All these border styles are listed below:

Example:

.p1{ border-style: none }
.p2{ border-style: hidden }
.p3{ border-style: solid }
.p4{ border-style: dashed }
.p5{ border-style: dotted }
.p6{ border-style: double }
.p7{ border-style: groove }
.p8{ border-style: ridge }
.p9{ border-style: inset }
.p10{ border-style: outset }

CSS Syntax

The border-style property has the following syntax:

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

Property Values

The border-style property accepts the following values:

General Info

Related Pages

CSS Tutorial: CSS Borders