Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set dashed line for border with CSS
To set the dashed line for the border, use the border-style property with the value dashed. This creates evenly-spaced dashes around the element's border.
Syntax
border-style: dashed; /* or combine with width and color */ border: width style color;
Example
<html>
<head>
</head>
<body>
<p style="border-width: 3px; border-style: dashed;">
This is a dashed border.
</p>
</body>
</html>
Different Dashed Border Styles
<html>
<head>
<style>
.thin-dashed {
border: 1px dashed #333;
margin: 10px 0;
padding: 10px;
}
.thick-dashed {
border: 5px dashed #007acc;
margin: 10px 0;
padding: 10px;
}
.colored-dashed {
border: 3px dashed red;
margin: 10px 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="thin-dashed">Thin dashed border</div>
<div class="thick-dashed">Thick blue dashed border</div>
<div class="colored-dashed">Red dashed border</div>
</body>
</html>
Border Properties Breakdown
<html>
<head>
<style>
.demo-box {
width: 200px;
height: 100px;
margin: 20px;
padding: 15px;
display: inline-block;
}
.individual-props {
border-width: 4px;
border-style: dashed;
border-color: green;
}
.shorthand {
border: 4px dashed purple;
}
</style>
</head>
<body>
<div class="demo-box individual-props">
Individual properties
</div>
<div class="demo-box shorthand">
Shorthand property
</div>
</body>
</html>
Comparison of Border Styles
| Border Style | Appearance | Use Case |
|---|---|---|
solid |
Continuous line | Standard borders |
dashed |
Evenly-spaced dashes | Emphasis, separation |
dotted |
Series of dots | Subtle borders |
Conclusion
Use border-style: dashed to create dashed borders. Combine with border-width and border-color for customization, or use the shorthand border property for concise styling.
Updated on: 2026-03-15T23:18:59+05:30
782 Views
Advertisements