Make circle around bullet in js carousel - css

Question

Please, advise how to make circle around the bullet using CSS, when the bullet (slide) is active?
Right now my css code is:
.slide-dot {
cursor: pointer;
height: 10px;
width: 10px;
text-decoration: none;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.active {
background-color: #FFE600;
}
Example:

Answer 1

Add padding and transparent border to the dot. Use background-clip: content-box to prevent the background from effect the padding and border area. Change the color of the border to currentColor when active.
Note: I've used currentColor to control the background and border via one property.
.slide-dot {
cursor: pointer;
height: 10px;
width: 10px;
text-decoration: none;
color: #bbb;
background-color: currentColor;
border-radius: 50%;
display: inline-block;
padding: 5px;
background-clip: content-box;
border: 1px solid transparent;
}
.active {
color: #FFE600;
border-color: currentColor;
}
<div class="slide-dot"></div>
<div class="slide-dot active"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>

Answer 2

div {
margin-top: 50px;
}
.dot {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: black;
border: 1px solid yellow;
border-radius: 50%;
position: relative;
box-shadow: 0 0 0 1px #cfd1d1;
}
<!-- The bullets -->
<div style="text-align:center">
<span class="dots"><span class="dot" onclick="currentSlide(1)"></span></span>
<span class="dots"><span class="dot" onclick="currentSlide(2)"></span></span>
<span class="dots"><span class="dot" onclick="currentSlide(3)"></span></span>
</div>
Hope you can get some idea through this :)