Common Border Styles
The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
Following are the types of borders:
Border Style | Description |
---|---|
Dotted | Creates a series of dots. |
Dashed | Forms a dashed line. |
Solid | Produces a continuous line. |
Double | Renders two parallel lines. |
Groove | Creates 3D grooved effect. |
Ridge | Creates 3D ridged effect. |
Inset | Adds 3D inset border. |
Outset | Adds 3D outset border. |
None | Removes the border. |
Hidden | Hides the border. |
Example : In this example Paragraphs feature varied border styles (dotted, dashed, solid, double) via CSS classes (.dotted, .dashed, .solid, .double). This enhances visual presentation, demonstrating distinct styles for each paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>w3wiki</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>
Output:
CSS Borders
CSS borders are used to define an element’s boundary, providing visual separation and structure to web content. Borders can be customized in terms of width, style, and color, allowing for a wide range of design possibilities. Common border styles include solid, dashed, dotted, and double.
This Borders in CSS article will teach us about CSS borders, covering styling options, practical use cases, and best practices.
Table of Content
- Border Properties
- Ways to Style Border in CSS
- Common Border Styles
- CSS Border Width
- CSS Border Color
- CSS Border individual sides:
- Border radius property
- Practical Use Cases
- CSS Borders Use Cases
Contact Us