CSS border style property

The border-style property defines what type of border to choose from the available list given below.

An example to set border-style

The CSS border-style property also allows setting the different style for four borders (left, right, top and bottom). Though, border style CSS can be specified in a single declaration as well by using the border property.

All border styles example

The type of borders that can be set by using the border-style property are:

  • none
  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset
  • hidden

For example, the border style can be set as follows:

border-style: solid;

This will set the solid border, which is a single solid line for all four borders.

Example of border style in single declaration

You may specify four values to four borders in a single declaration. This is how you can specify it in the border-style property:

border-style: solid dotted dashed double;

The sequence if four values are given: Top, Right, Bottom and Left.

in this case, the solid will be assigned to the top, dotted to the right border, dashed to the bottom and double to the left border. See the following example online by pressing the link or image:

Experience this example online

A border-style example with all possible values

This example shows how each value of the CSS border style will look. Ten div elements are created and each is assigned with different border style class.

Experience this example online

You can see, ten div elements with ten different border style values.

 

You may also like to read: CSS border