Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesFor a simple decorative divider, use one HTML element for the line and two CSS pseudo-elements for its circular endpoints. Set each dot to 10px by 10px and center it vertically on the rule.
Make a divider with 10px endpoint circles
This CSS keeps the markup compact: the element draws the horizontal line, while ::before and ::after draw one circle at each end.
HTML
<div class="rule" aria-hidden="true"></div>CSS
.rule {
position: relative;
height: 4px;
background: #000;
margin: 1rem 0;
}
.rule::before,
.rule::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #000;
transform: translateY(-50%);
}
.rule::before { left: 0; }
.rule::after { right: 0; }The dots are equal circles because their width and height match and border-radius: 50% rounds them. Their top: 50% position and vertical translation align their centers with the rule. Change the background color on the rule and pseudo-elements together to use a different color.
Connect separate circles, such as progress steps
When the circles are actual content nodes rather than decorative endpoints, place them in a flex container and draw the connector behind them with a pseudo-element. The line then spans the container, while the dots remain independently styleable.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<div class="steps">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>.steps {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.steps::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 3px solid #ACCF5B;
z-index: 0;
}
.steps .dot {
position: relative;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: #22bacb;
}The positioned container anchors the connector, and the dots’ higher stacking order keeps them in front of it. This pattern suits a row of milestones or progress points; set the dot dimensions to 10px if that is the size you need.
When to use SVG instead
CSS is usually the simplest choice for a decorative divider in a web page. Use SVG when the line and endpoints are part of a reusable illustration or when you want explicit control over their coordinates. An SVG line is horizontal when its start and end have the same y-coordinate, and circles can be drawn at those endpoints:
<svg viewBox="0 0 220 20" role="img" aria-label="Horizontal line with circular endpoints">
<line x1="10" y1="10" x2="210" y2="10" stroke="currentColor" stroke-width="2" />
<circle cx="10" cy="10" r="5" fill="currentColor" />
<circle cx="210" cy="10" r="5" fill="currentColor" />
</svg>The 5px radius makes each endpoint 10px in diameter. SVG uses a line element and separate circle elements; the SVG examples reference also demonstrates inline SVG shapes.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose semantics that match the graphic
If the divider is purely decorative, hiding it from assistive technology with aria-hidden="true" is appropriate. If it communicates a relationship, sequence, or progress state, do not hide the meaningful information: represent that information in accessible text and markup as well as visually. A visual line alone does not explain what the circles signify.
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
