0

I have a circle with a border like below, how to set border on this circle without using border-right, left, top, bottom? I want to add a border, e.g. only for 10-20% of this circle border

.circle {
    background-color:#fff;
    border-bottom:1px solid red;   
    border-radius: 100%; 
    height:100px;
    width:100px;
}
<div class="circle"></div>

thanks for any help

iamdhavalparmar
  • 1,090
  • 6
  • 23
markWanka
  • 704
  • 1
  • 12
  • 29
  • 1
    You could try using a linear gradient border (but with 2 colours and no fade) - https://stackoverflow.com/questions/48975398/is-it-possible-based-on-css-to-create-a-circle-with-gradient-border-and-transpar – Pete Mar 01 '21 at 16:37

2 Answers2

0

I suggest this way if you want to add a border to the left and right of circle; you can just change the pixel of the bottom

codepen

.circle {
  background-color:#fff;
  border:1px solid red;   
  border-radius: 100%; 
  height:100px;
  width:100px;
  position:relative;
}
.circle::after{
  content:'';
  width:100px;
  height:100px;
  background-color:white;
  position:absolute;
  border-radius:50%;
  bottom:30px;
}
sanaz
  • 176
  • 9
-1

.circle {
    background-color:#fff;
    border:1px solid red;
    height:100px;
    width:100px;
    border-radius: 100%;
}
.circle-border{
    border:5px solid red;
    width:101px;
    height:101px;
    background-color:#fff;
    position:absolute;
    border-radius:100%;
  }
 <div class='circle-border'>   
  <div class="circle" >

  </div>
</div>
Manai Kais
  • 1
  • 1