Sébastien Gicquel Sébastien Gicquel - 1 month ago 14
CSS Question

Create a perfect dashed line with background-image in CSS

I would like to have a dotted line below to a text :

enter image description here

The web designer have designed a custom dotted so i can’t use :

h2 {
border-bottom: 4px dashed #fff;
display:table;
}


because it is not conform.

What i’ve done : I’ve made an image with a dot and position it with css :

h2 {
padding-bottom: 20px;
display:table;
background-image: url('../images/tiret.png');
background-repeat: repeat-x;
background-position: center bottom;
}


It works very well but depending on the width of the text, the last dot could appear cut like you can see on this picture :

enter image description here

Do you have a suggestion on how to avoid this ?

Answer

You can use border-image:

h1 {
  display: inline-block;
 border-style: solid;
border-width: 0px 0px 12px;
-moz-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-webkit-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-o-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
}
<h1>Hello world</h1>

Codepen here

Also there is usefull online generator