How can I add rounded borders around an image?

Question

Hi, I am new to web design and I am struggling on how to make this type of border. If anybody could suggest a solution it'll be very helpful. Thanks.

Answer 1

Go with the first answer.

There is a much more simple way to do this using pseudo-elements

. The advantage is that you only require one class for the whole layout. Pretty simple.

*{
  margin: 0;
}

.circle{
  width: 100px;
  height: 100px;
  background: #f4c741;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}
.circle:before, .circle:after{
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}
.circle:before{
  width: 100px;
  height: 100px;
  border: 15px solid #f4d041;
}
.circle:after{
  border: 20px solid #f4e242;
  width: 125px;
  height: 125px;
}

<div class="circle"></div>