CSS border-style Property
Last Updated :
20 Feb, 2024
CSS border-style Property is used to set the border style, and it 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.
Default Value: none
CSS border-style Property Syntax:
border-style: value;
CSS border-style Property Values:
- none: No border is created and it is left plain.
- hidden: Just like none, it doesn’t 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 a border.
- double: Two lines placed parallel to each other act as the border.
- groove: Displays a 3D grooved border, its effect depends on border-color value.
- ridge: Displays a 3D ridged border, its effect depends on border-color value.
- inset: displays a 3D inset border, its effect depends on border-color value.
- outset: Displays a 3D outset border, its effect depends on border-color value.
CSS border-style property is a shorthand for:
The below examples illustrate the use of the border-style property.
CSS border-style property Example :
In This example we are using is using CSS border-style property which contain only one value for all borders.Â
HTML
<!DOCTYPE html>
< html >
< head >
< title >Dotted Borders</ title >
< style >
.GFG {
border-style: dotted;
border-width: 6px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</ style >
</ head >
< body >
< div class = "GFG" >
< h2 >GeeksforGeeks</ h2 > </ div >
</ body >
</ html >
|
Output:
CSS border-style property Example Explanation:
Here is the explanantion of above exmaple.
- Here we have html file with dotted border styling and green background, containing a centered heading.
- CSS defines dotted borders, green background, and centered text within a fixed-sized container.
CSS border-style property example with multiple values:
In this example The CSS border-style property accepts multiple values to define different styles for each side of the border.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Dotted Borders</ title >
< style >
.GFG {
border-style: solid double dashed dotted;
border-width: 6px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</ style >
</ head >
< body >
< div class = "GFG" >
< h2 >GeeksforGeeks</ h2 > </ div >
</ body >
</ html >
|
Output:
CSS border-style property with multiple values Example Explanation:
Here is the implemantation of above example.
- Here we have a div with 4 different brder style.
- we target our div border by using id selctor.
- here we are using border-style with multiple values like border-style: solid double dashed dotted; in which solid is top double is right and dashed is bottom and dotted is right side of our given div.
CSS border-style Property Use Cases:
we can use border properties like style, width, and color to create and style borders in CSS.
Here we can use CSS properties like border-style, border-width, and border-color to create a border around HTML elements.
to
The browser supported by border-style Property are listed below:Â
- Chrome 1.0
- Edge 12.0
- IE 4.0
- Firefox 1.0
- Safari 1.0
- Opera 3.5
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...