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 Declaration | Output |
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
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 © 2022 1keydata.com All Rights Reserved Privacy Policy
About Contact |