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