CSS dotted border
CSS Dashed Borders
Borders are a crucial element in web design, used to highlight areas or elements. In addition to the common solid borders, dashed borders are also a common design style. In CSS, we can achieve dashed border effects using a few simple properties. This article will detail how to create dashed borders using CSS and provide several sample code examples for your reference.
1. Create a Dashed Border Using the border-style Property
In CSS, we can use the border-style property to specify the border style, including dashed and dotted styles. Here’s a simple example code that shows how to use the border-style property to create a dashed border:
<!DOCTYPE html>
<html Tutorial">html>
<head>
<style>
.dashed-border {
border: 2px dashed black;
padding: 10px;
}
</style>
</head>
<body>
<div class="dashed-border">
This is a div with dashed border.
</div>
</body>
</html>
Output:
In the example above, we add a 2-pixel-wide black dashed border to a <div> element. You can change the border’s style and color by adjusting the value of the border property.
2. Create a Custom Dashed Border Using the border-image Property
In addition to using the border-style property, we can also use the border-image property to create a custom dashed border. The border-image property allows us to use an image to define the border style. Here’s a sample code demonstrating how to create a dashed border using the border-image property:
<!DOCTYPE html>
<html>
<head>
<style>
.dashed-border {
border: 10px solid transparent;
border-image: url('dashed-border.png') 20 round;
padding: 10px;
}
</style>
</head>
<body>
<div class="dashed-border">
This is a div with a custom dashed border.
</div>
</body>
</html>
Output:
In the example above, we add a custom dashed border to a <div> element. We use an image named dashed-border.png to define the border style, and specify the border width and repeating pattern using the border-image property.
3. Using the box-shadow property to simulate a dotted border
In addition to using the border-style and border-image properties, we can also use the box-shadow property to simulate a dotted border effect. The box-shadow property can be used to add a shadow effect. By adjusting the shadow parameters, we can achieve the effect of a dotted border. Here’s a sample code demonstrating how to create a dashed border using the box-shadow property:
<!DOCTYPE html>
<html>
<head>
<style>
.dashed-border {
box-shadow: 0 0 0 2px black inset, 0 0 0 4px white inset;
padding: 10px;
}
</style>
</head>
<body>
<div class="dashed-border">
This is a div with simulated dashed border.
</div>
</body>
</html>
Output:
In the example above, we added a simulated dashed border to a <div> element. We simulated the dashed effect by setting two inset shadows: one solid black and the other dashed white.
4. Creating a Dashed Border Using the ::before and ::after Pseudo-Elements
In addition to the above methods, we can also use the ::before and ::after pseudo-elements to create a dashed border. By adding these pseudo-elements before and after an element and setting their styles, we can achieve the same dashed border effect. Here’s a sample code demonstrating how to create a dashed border using pseudo elements:
<!DOCTYPE html>
<html>
<head>
<style>
.dashed-border {
position: relative;
padding: 10px;
}
.dashed-border::before, .dashed-border::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: black;
}
.dashed-border::before {
left: 0;
}
.dashed-border::after {
right: 0;
}
</style>
</head>
<body>
<div class="dashed-border">
This is a div with pseudo dashed borders. border.
</div>
</body>
</html>
Output:
In the example above, we added two pseudo-elements, ::before and ::after, to a <div> element, representing the left and right dashed lines, respectively. By setting their styles and positions, we achieved the effect of a dashed border.
5. Using CSS Animation to Create a Flashing Dashed Border
In addition to static dashed borders, we can also use CSS animations to create flashing dashed borders. By setting keyframe animations and border styles, we can create a dynamic dashed border. Here’s a sample code demonstrating how to create a blinking dashed border using CSS animation:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes dash {
0% {
border-color: black;
}
50% {
border-color: transparent;
}
100% {
border-color: black;
}
}
.blink-border {
border: 2px dashed black;
animation: dash 2s infinite;
padding: 10px;
}
</style>
</head>
<body>
<div class="blink-border">
This is a div with blinking dashed border border.
</div>
</body>
</html>
Output:
In the example above, we defined a keyframe animation called dash to create a flashing effect by changing the border color. We then added this animation to a <div> element, creating a flashing dashed border.
6. Using CSS Variables to Create Customizable Dashed Borders
In real-world projects, we may need to customize the style of dashed borders based on different needs. To facilitate management and styling, we can use CSS variables to create customizable dashed borders. Here’s a sample code demonstrating how to create a custom dashed border using CSS variables:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--border-color: black;
--border-width: 2px;
}
.custom-border {
border: var(--border-width) dashed var(--border-color);
padding: 10px;
}
</style>
</head>
<body>
<div class="custom-border">
This is a div with a custom dashed border.
</div>
</body>
</html>
Output:
In the example above, we use the :root pseudo-class to define two CSS variables, --border-color and --border-width, to represent the border’s color and width, respectively. These variables are then used within the .custom-border class to define the style of the dashed border. By modifying the values of these two variables, we can easily customize the style of the dashed border.
7. Using CSS Pseudo-Classes to Create Irregular Dashed Borders
In addition to regular rectangular borders, we can also use CSS pseudo-classes to create irregularly shaped dashed borders. By combining the clip-path property with the border property, we can achieve a variety of dashed border effects. Here’s a sample code demonstrating how to use CSS pseudo-classes to create an irregular dashed border:
<!DOCTYPE html>
<html>
<head>
<style>
.irregular-border {
width: 200px;
height: 200px;
background: #f0f0f0;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border: 2px dashed black;
padding: 10px;
}
</style>
</head>
<body>
<div class="irregular-border">
This is a div with irregular dashed borders. border.
</div>
</body>
</html>
Output:
In the example above, we set an irregular shape for a <div> element and defined this shape using the clip-path property. We then added a dashed border to this element, creating an irregular dashed border effect.
8. Creating a Gradient Dashed Border with CSS Gradients
In addition to solid dashed borders, we can also use CSS gradients to create gradient dashed borders. By setting the background-image property to a linear gradient, we can achieve a dotted border gradient effect. Below is a sample code demonstrating how to create a dotted border using CSS gradients:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-border {
border: 2px dashed;
border-image: linear-gradient(to right, black, white) 1;
padding: 10px;
}
</style>
</head>
<body>
<div class="gradient-border">
This is a div with a gradient dashed border.
</div>
</body>
</html>
Output:
In the example above, we added a gradient dashed border to a <div> element. We used the linear gradient linear-gradient to define the border’s color gradient, creating a dotted border with a gradient effect.
9. Using CSS Pseudo-Elements to Create a Dashed Border with an Arrowhead
In some special cases, we may need to add arrows or other decorative elements to borders. By using CSS pseudo-elements and a few tricks, we can achieve a dashed border with an arrowhead. Here’s a sample code demonstrating how to use CSS pseudo-elements to create a dashed border with an arrow:
<!DOCTYPE html>
<html>
<head>
<style>
.arrow-border {
position: relative;
padding: 10px;
}
.arrow-border::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.arrow-border::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: black;
}
</style>
</head>
<body>
<div class="arrow-border">
This is a div with an arrow dashed border.
</div>
</body>
</html>
Output:
In the example above, we add two pseudo-elements, ::before and ::after, to a <div> element, representing the top and bottom arrows, respectively. By setting their styles and positions, we achieve a dashed border effect with arrows.
10. Creating a Dotted Polygonal Border Using CSS Grid Layout
This final example uses CSS Grid Layout to create a dotted polygonal border. By combining Grid Layout with pseudo-elements, we can achieve a variety of dotted border effects for polygonal shapes. Here is a code example showing how to create a dashed polygon border using CSS Grid Layout:
<!DOCTYPE html>
<html>
<head>
<style>
.polygon-border {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
border: 2px dashed black;
padding: 10px;
}
.polygon-border::before {
content: '';
grid-column: 1 / span 6;
grid-row: 1 / span 6;
border: 2px dashed black;
}
</style>
</head>
<body>
<div class="polygon-border">
This is a div with dashed polygon border border.
</div>
</body>
</html>
Output:
In the example above, we apply Grid Layout to a <div> element and define a 6×6 grid by setting grid-template-columns and grid-template-rows. We then add a pseudo-element ::before to this element and set its position and style to create a polygonal dashed border effect.
Through the example code above, we’ve detailed how to use CSS to create various types of dashed borders. Whether it’s a simple dashed border or a complex polygonal border, by flexibly applying various CSS properties and techniques, we can achieve a variety of unique design effects.