The border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.
Note: The border-style property can take One to Four values at a time.
|none||No border is created and it is left plain|
|hidden||Just like None it doesnt show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user defined value.|
|dotted||A series of dots are displayed in a line as the border.|
|solid||A single solid and bold line is used as a border.|
|dashed||A series of square dashed lines are used as border.|
|double||Two lines placed parallel to each other act as the border.|
|groove||Displays a 3D grooved border, it’s effect depends on border-color value.|
|ridge||Displays a 3D ridged border, it’s effect depends on border-color value.|
|inset||Displays a 3D inset border, it’s effect depends on border-color value.||outset||Displays a 3D outset border, it’s effect depends on border-color value.|
border-style: none dotted solid dashed; -> Top border is none(no border) -> right border is dotted -> bottom border is solid -> left border is dashed
border-style: dotted dashed; -> Top border and bottom borders are dotted -> right border and left borders are dashed
border-style: solid; All borders are solid
Below programs illustrate the border-style property:
Program 1: Using only one value for all borders.
Program 2: Using multiple values for borders.
Browser Compatibility :
|Browser||Compatible from version:|
- HTML | DOM Style borderStyle Property
- CSS | transition-property Property
- CSS | top Property
- CSS | all Property
- CSS | right Property
- CSS | animation-name Property
- CSS | height Property
- CSS | left Property
- CSS | perspective Property
- CSS | bottom Property
- CSS | column-gap Property
- CSS | transition Property
- CSS | Display property
- CSS | grid Property
- CSS | border-top Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.