Border-Style
Border Style
- In CSS, the border-style property is used to specify the style of the border around an element.
- The border-style property can accept one or multiple values, each of which corresponds to a border side.
Syntax:
selector {
border-style: value;
}
Values for the border-style property include
- Solid: Creates a solid line border.
border-style: solid;
- Dotted: Creates a series of small dots as the border.
border-style: dotted;
- Dashed: Creates a series of short dashes as the border.
border-style: dashed;
- Double: Creates a double-line border.
border-style: double;
- Groove: Creates a three-dimensional, grooved border.
border-style: groove;
- Ridge: Creates a three-dimensional, ridged border.
border-style: ridge;
- Inset: Creates a three-dimensional, inset border.
border-style: inset;
CSS properties to control the style of an element:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
border-width: 5px;
padding: 2em;
}
</style>
</head>
<body>
<h2>border-style (single-side)</h2>
<p>Welcome to Quipoin </p>
</body>
<html>
Output: