Как вы можете увеличить размеры пунктирной границы для отдельных точек (не для всей пунктирной границы) с помощью CSS?

Question

Как видно из названия, я пытаюсь выделить пунктирные границы в главном меню с правой стороны, чтобы оно выглядело лучше.

Мой главный вопрос, хотя по соображениям дизайна, не могли бы вы дать последняя верхняя точка и нижняя точка имеют больший размер, чем другие точки?

Например, верхняя правая точка (последняя) и нижняя правая точка (последняя) имеют размер 5px, а остальные промежуточные имеют 2px?

Answer 1

К сожалению, это невозможно сделать только в стиле границы css. Вы можете использовать border-image и использовать созданное вами изображение, которое имеет шаблон, который вы ищете. В противном случае может быть лучше сделать что-то в соответствии с инструкциями ниже. Создайте два элемента div, сделайте их кружками (или точками) и задайте им абсолютное положение относительно контейнера меню.

#container {
width: 100px;
height: 100px;
border: solid 2px black;
border-style: dotted;
position: relative;
}

#dotOne, #dotTwo{
  position: absolute;
  right: -2px;
  width: 5px;
  height: 5px;
  background-color: black;
  border-radius: 50%;
}

#dotOne{
  top: -2px;
}

#dotTwo{
  bottom: -2px;
}

<div id='container'>
<div id='dotOne'>
</div>
<div id='dotTwo'>
</div>
</div>