Recommended Free Tools
For a decorative divider with 10px circles at each end, make one relatively positioned element for the line and add the circles with its ::before and ::after pseudo-elements. If the circles are separate items in a progress indicator, use a connector behind them instead.
Make a decorative divider with CSS
This single-element pattern keeps the HTML minimal. The line is 4px tall; each endpoint is 10px across, with its center aligned to the line’s center.
As an Amazon Associate I earn from qualifying purchases.
<div class="rule" aria-hidden="true"></div>.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; }Set equal width and height values to keep the endpoints circular; border-radius: 50% rounds them. The top: 50% and translateY(-50%) combination centers each dot vertically on the rule. Change the shared background color to style the line and dots together.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
aria-hidden="true" is appropriate when the divider is purely decorative. If it communicates information or a relationship, do not hide it from assistive technology; provide suitable semantics for that use.
#1 Best Overall
Connect separate circles in a progress indicator
When the circles are actual content nodes, such as steps in a progress indicator, draw the connector on their positioned parent. The pseudo-element spans the parent, while the dots sit above it in the stacking order.
<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 connector stretches across the available width, and the dots remain in front of it. Adjust the parent’s width and the dot dimensions to suit the layout. This pattern is intended for separate nodes; use the single-element version when you only need a decorative rule.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When SVG is a better fit
Use SVG when the line and endpoints are part of a reusable graphic or you need precise coordinate-based control. A <line> defines the connector, and two <circle> elements define its ends:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problems<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>Because the line’s y-coordinates are both 10, it is horizontal. Each circle has a radius of 5, making it 10 units in diameter. SVG scales as a vector graphic, while CSS is usually simpler for a divider that belongs to a page layout. For the SVG line element’s role, see the W3Schools SVG line reference; examples of the line and circle primitives are also available in the SVG examples.
Quick Recap
Rank #3
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.
