CSS Border-Style Property



CSS Tutorial  >  Border  >  Border-style

The border-style property defines the format of the border. The table below shows the possible values and how each one renders.

CSS DeclarationOutput

border-style:solid;

Solid Border

border-style:dashed;

Dashed Border

border-style:double;

Double Border

border-style:dotted;

Dotted Border

border-style:groove;

Groove Border

border-style:ridge;

Ridge Border

border-style:inset;

Inset Border

border-style:outset;

Outset Border

The default value for border-style is "none."

The border-style property itself is a shorthand for the following properties:

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

There can be one, two, three, or four values set for the border-style property. The rules are as follows:

  • one value: the style applies to all four borders.
  • two values: the first style applies to the top border and the bottom border, and the second style applies to the left border and the right border.
  • three values: the first style applies to the top border, the second style applies to the left border and the right border, and the third style applies to the bottom border.
  • four values: the first style applies to the top border, the second style applies to the right border, the third style applies to the bottom border, and the fourth style applies to the left border.

Example 1: Single border style

CSS Declaration

border-style: dotted;

results in the following:

In Example 1, one style (dotted) is defined. Therefore, all four side are shown with the dotted style.

Example 2: Multiple border style

CSS Declaration

border-style: solid dashed;

results in the following:

In Example 2, two styles are defined. The first style (solid) applies to the top border and the bottom border, and the second style (dashed) applies to the left border and the right border.

Next: CSS Border-Color




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact