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.
Syntax:
border-style: value;
Default Value
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.
The border-style property is a shorthand for the following CSS properties:
The border-style property may be defined by using one, two, three, or four values, as given below:
- If a single value is assigned, it will set the style for all 4 sides.
- If two values are assigned, the first style is set to the top and bottom sides and the second will be set to the left & right sides.
- If three values are assigned, the first style is set to the top, the second is set to the left and right, the third is set to the bottom.
- If four-style values are assigned, the styles are set to the top, right, bottom, and left, which follows the clockwise order.
The below examples illustrate the use of the border-style property.
Example 1: This example is using 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:
Example 2: This example is using multiple values for borders.
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:
Supported Browser: 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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Aug, 2023
Like Article
Save Article