How can you increase dotted border-sizes for single dots (not the whole dotted border) via CSS?

Question

As the title says, I'm trying to have dotted borders on my main-menu on the right side to give it a better look.

My main question is though for design reasons, can you give the last upper dot & bottom dot a bigger size than the other dots?

For example the top right dot (last) & bottom right dot(last) has 5px size, bot the others inbetween have 2px?

Answer 1

Unfortunately this is not doable with just border-style css. You can use border-image and use an image that you made that has the pattern you're looking for. Otherwise it might be better to do something along the lines below. Create two divs, make them circles (or dots) and give them absolute positioning relative to the menu container.

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