Есть ли способ предотвратить «полуточки» на этой границе?

Question

Я создаю «цепочку лампочек», используя пунктирную границу, но когда я делаю прозрачную левую и нижнюю границу, это оставляет меня с этими «полуточками», что убивает иллюзию.

Есть ли способ сделать это без того, чтобы точки были разрезаны пополам?

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

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

Answer 1

Вы видите полуточки , потому что вы установили границу со всех сторон (сверху, справа, снизу, слева). Таким образом, для решения этой проблемы нужно установить только border-top и border-right вместо установки границы со всех сторон.

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

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

Answer 2

Как и в большинстве вещей в CSS, возможно, есть много способов сделать это. Вот один.

    .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>

По сути, вы скрываете последнюю точку на левом и нижнем краях границы.