Search code examples
htmlcssinputborder

Increase length of dots on border

I am using an input in one of my projects and I'm making a dotted line on the bottom. Ideally, I would like to have about 5 dots about 10px wide each. Kind of like the example below:
________ ________ _______ ______ _____.

This is the code that I have so far :

input {
  border-bottom: 3px tomato dotted;
}
<input type="text" numbers-only>

Solution

  • Use gradient

    input {
  border-bottom: 3px solid tomato;
  border-bottom:none;
  background:repeating-linear-gradient(to right,tomato 0 10px,transparent 0 15px) bottom/100% 3px no-repeat;
}
    <input type="text" numbers-only/>