Skip to main content
CSS Tip

A fancy title divider

Turn your titles into a fancy divider using few lines of code

A title with a fancy decoration

.fancy {
--b: 6px; /* control the border thickness */
--w: 80px; /* control the width of the line*/
--g: 15px; /* control the gap */
--c: #0B486B;

border: 1px solid;
background:
conic-gradient(from 45deg at left ,var(--c) 25%,#0000 0) 0,
conic-gradient(from -135deg at right,var(--c) 25%,#0000 0) 100%;
background-size: 51% 100%;
background-origin: border-box;
background-repeat: no-repeat;
border-image:
linear-gradient(
#0000 calc(50% - var(--b)/2),
var(--c) 0 calc(50% + var(--b)/2),
#0000 0)
1/0 var(--w)/calc(var(--w) + var(--g));
}

See the Pen Fancy title divider with one element by Temani Afif (@t_afif) on CodePen.


More CSS Tips