Is there a way to prevent "half-dots" on this border?

Question

I'm creating a "lightbulb chain" using the dotted border, but when I make the left and bottom border transparent, it leaves me with these "half-dots", which kills the illusion.

Is there anyway to do this without the dots being cut in half?

.chain {
height: 300px;
width: 50px;
border: 5px dotted black;
border-color: #000 #000 transparent transparent;
}

<div class="chain"></div>

using the **border-radius** could help here, if the style does not conflict with you solution — Somangshu Goswami, Oct 29 '18 at 08:06
@vucko instead of turning this into a puzzle trail, you could also link directly to that "excellent answer". — Peter B, Oct 29 '18 at 08:15
@TemaniAfif well, it's [well explained](https://stackoverflow.com/a/7073558/1763929) how border works. But okey, I'll remove my vote to close, but it may be helpful for the link to stay. — Vucko, Oct 29 '18 at 10:08

Niraj Kaushal · Accepted Answer · 2018-10-29T08:23:58.563

3

You are seeing half-dots because you have set border to all side(top, right, bottom, left). So the fix for this problem is to only set border-top and border-right instead of setting border to all side.

.chain {
height: 300px;
width: 50px;
border-top: 5px dotted black;
border-right: 5px dotted black;
}

<div class="chain"></div>

edited Oct 29 '18 at 08:23

answered Oct 29 '18 at 08:13

Niraj Kaushal

1,452
2
13
20

Mav · Answer 2 · 2018-11-24T05:55:33.983

1

As with most things in CSS, there are probably many ways to do this. Here's one.

    .container{
     overflow: hidden;
     position: relative;
     left: 5px;
     top: -7px;
    }
    
    .chain {
     position: relative;
     left: -5px;
     top: 7px;
     height: 300px;
     width: 50px;
     border: 5px dotted black;
     border-color: #000 #000 transparent transparent;
    }

    <div class="container">
     <div class="chain"></div>
    </div>

Basically, you're hiding the last dot on the left and bottom ends of the border.

edited Nov 24 '18 at 05:55

answered Oct 29 '18 at 08:04

Mav

1,087
1
15
37

Ah, that's some "out-of-the-box" thinking! :D Just thought maybe there would be some property that might also remove it. This works just fine. Thank you! – WonkasWilly Oct 29 '18 at 08:08

Is there a way to prevent "half-dots" on this border?

2 Answers2