How to create multiple borders around existing border of circle [duplicate]

by

You can use a simple border and clip the background to the content-box to create the transparent part in the padding area:

div.circle {
  background: rgba(255, 255, 255, .5) content-box;
  padding: 10px;
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
  border: 10px solid rgba(255, 255, 255, .5);
}

body {
  background: pink;
}
<div class="circle"></div>

You can also consider radial-gradient

div.circle {
  background: 
    radial-gradient(farthest-side, 
      rgba(255, 255, 255, .5) calc(100% - 20px),transparent calc(100% - 20px),
      transparent calc(100% - 10px),rgba(255, 255, 255, .5) calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}
<div class="circle"></div>

That you can easily scale to any number of borders:

div.circle {
  background: 
    radial-gradient(farthest-side,
      #fff        calc(100% - 61px),transparent calc(100% - 60px), 
      transparent calc(100% - 51px),#fff        calc(100% - 50px),
      #fff        calc(100% - 41px),transparent calc(100% - 40px),
      transparent calc(100% - 31px),#fff        calc(100% - 30px),
      #fff        calc(100% - 21px),transparent calc(100% - 20px),
      transparent calc(100% - 11px),#fff        calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}
<div class="circle"></div>

More Related Contents:

  1. what does "/" mean in css border-radius property? [duplicate]
  2. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  3. Border Gradient with Border Radius
  4. Remove white space below image [duplicate]
  5. How to remove the border highlight on an input text element
  6. Any way to declare a size/partial border to a box?
  7. CSS triangle custom border color
  8. CSS Property Border-Color Not Working
  9. Control the dashed border stroke length and distance between strokes
  10. CSS: Margin-top when parent’s got no border
  11. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  12. Hover effect : expand bottom border
  13. How to create multi-color border with CSS?
  14. How does border-image work with linear-gradient?
  15. Should I use ‘border: none’ or ‘border: 0’?
  16. Double border with different color [duplicate]
  17. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  18. Border within border CSS
  19. CSS border less than 1px [duplicate]
  20. Two color borders
  21. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  22. Removing the image border in Chrome/IE9
  23. Can I have different colored left and top borders in CSS?
  24. Creating space between an element and its border
  25. text flowing out of div
  26. Combining border-top,border-right,border-left,border-bottom in CSS
  27. Drawing border colors during a CSS transition
  28. input type=”image” shows unwanted border in Chrome and broken link in IE7
  29. Inner border over images with CSS?
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment