Dashed border top not even

Question

I am trying to add dashed border top on a div using css. I have this: https://jsfiddle.net/uexma4o6/74/

div {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-top: 2px dashed #AAA;
}

The problem is that first and last dash are little longer than others. I think it's because actual borders on the left and right are included? How can I make all dashes same width? I am looking for solution without using border-image. Thanks.

Possible duplicate of [Control the dashed border stroke length and distance between strokes](https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes) — NikxDa, Jan 10 '18 at 00:44
I didn't found answer on that thread. I would like not to use border image. — Vikast, Jan 10 '18 at 00:45
The answer was that there was no way to control it. You should use border image instead as that would allow control. — LoveHateDevelopment, Jan 10 '18 at 00:48
the best way would be to use an svg as borderimage, maybe a inline svg — Jarlik Stepsto, Jan 10 '18 at 00:48

brendangibson · Answer 1 · 2018-01-10T03:17:36.183

0

You could use a SVG line within your div like -

<div>
    <svg width="50" height="2" viewBox="0 0 50 2" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="50" y2="0" stroke-width="2" stroke="#AAA" stroke-dasharray="2" stroke-width="2"/>
    </svg>
</div>

edited Jan 10 '18 at 03:17

answered Jan 10 '18 at 01:07

brendangibson

2,377
2
21
36

score 0 · Answer 2 · answered Jan 10 '18 at 01:28

0

Try this. you can adjust the size and width based on your requirement.

background-image: linear-gradient(to right, white 33%, rgba(255,255,255,0) 0%);
background-position: top;
background-size: 5px 3px;
background-repeat: repeat-x;
border-right-width: 2px;

answered Jan 10 '18 at 01:28

Saravana

3,389
4
21
37

not working, can you update jsfiddle with this code working? – Vikast Jan 10 '18 at 11:52

Dashed border top not even

2 Answers2