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
- 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.
Supported Browser: The browser supported by border-style Property
are listed below:
- Chrome 1.0
- Edge 4.0
- Firefox 1.0
- Safari 1.0
- Opera 3.5
- HTML | DOM Style borderStyle Property
- CSS | transition-property Property
- CSS | right Property
- CSS | top Property
- CSS | nav-down property
- CSS | nav-right property
- CSS | all Property
- CSS | transition Property
- CSS overflow-y Property
- CSS | clip Property
- CSS | perspective Property
- CSS | flex Property
- CSS | align-self Property
- CSS | resize Property
- CSS | grid-row 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 email@example.com. 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.