CSS Tip

Horizontal lines around your title

Add horizontal lines around your title using border-image

Titles with horizontal lines on the sides

h2 {
  --s: 3px;   /* the thickness */
  --c: red;   /* the color */
  --w: 100px; /* the width */
  --g: 10px;  /* the gap */
  border-image: 
    linear-gradient(
     #0000      calc(50% - var(--s)/2),
     var(--c) 0 calc(50% + var(--s)/2),
     #0000    0) 
   0 1/0 var(--w)/0 calc(var(--w) + var(--g));
}

See the Pen Horizontal lines around your title by Temani Afif (@t_afif) on CodePen.

Related: smashingmagazine.com/2024/01/css-border-image-property/

More CSS Tips