CSS border-style Property
CSS border-style property sets the style of all four sides of an element’s borders. It is a shorthand property for defining the border-top-style, border-bottom-style, border-left-style, border-right-style.
This property takes from one to four values. So each side can have its own value.
The default value of border-style is none. Borders are put on top of the element’s background.
You also need to know that some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one.
The border-style property is defined using one, two, three, or four values. When one value is defined, it applies the same style to all four sides. When two values are defined, the first style applies to the top and bottom sides, the second to the left and right sides. When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom side. When four values are specified, the styles apply to the top, right, bottom, and left, like a clockwise order.
| Initial Value | none |
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.borderStyle = "dotted double"; |
Syntax¶
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;Example of the border-style property: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p> Example of dotted border-style.</p>
</body>
</html>Example of the border-style property where each side has its own value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p>Example, where each side has own value.</p>
</body>
</html>Example of the border-style property with all the values: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #eee;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #c9c5c5;
border: 8px solid #1c87c9;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-style example classes */
.b1 {
border-style: hidden;
}
.b2 {
border-style: dotted;
}
.b3 {
border-style: dashed;
}
.b4 {
border-style: solid;
}
.b5 {
border-style: double;
}
.b6 {
border-style: groove;
}
.b7 {
border-style: ridge;
}
.b8 {
border-style: inset;
}
.b9 {
border-style: outset;
}
</style>
</head>
<body>
<h1>Border-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| none | Will show no border. Default value. | |
| hidden | The same as "none", except in border conflict resolution for table elements. | |
| dotted | The border is specified as a series of dots. | |
| dashed | The border is specified as a series of dashes. | |
| solid | The border is specified as a solid line. | |
| double | The border is specified as a double solid line. | |
| groove | It’s a 3D grooved border and gives the impression that the border is carved. Opposite of the ridge. | |
| ridge | Specifies a 3D ridged border and gives the impression of extruded appearance. Opposite of groove. | |
| inset | It’s a 3D effect that makes the impression that the element appears embedded. Opposite of the outset. | |
| outset | It’s a 3D effect that makes the impression that the element appears embossed. Opposite of inset. | |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji