How to use CSS to give a circle a "partial border"


Problem:

Another user (@Simon Zhu) asked if it was possible to use CSS to create a circle with a "partial border" - especially a partial-border which arced around more than 90 degrees of the circle.

See: How to create partial circle border in CSS

The answer is yes - any arc is possible using clip-path and border-radius and the ::before pseudo-element.

See answer below.


Solution:

You can use a combination of:

  • clip-path: polygon()
  • border-radius
  • ::before pseudo-element

to create any partial circle border you wish.

Working Example:

body {
width: 420px
}

.circle {
position: relative;
float: left;
width: 112px;
height: 112px;
margin: 6px 6px 12px 6px;
padding: 6px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
}

.circle::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 124px;
height: 124px;
background-color: rgb(255, 255, 255);
}

.circle::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
margin: 12px;
background-color: rgb(255, 255, 0);
border-radius: 50%;
}

.circle:nth-of-type(1)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 50% 100%, 0% 100%);
}

.circle:nth-of-type(2)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 50%, 30% 100%, 0% 100%);
}

.circle:nth-of-type(3)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 50%, 10% 100%, 0% 100%);
}

.circle:nth-of-type(4)::before {
clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

.circle:nth-of-type(5)::before {
clip-path: polygon(0% 0%, 30% 0%, 50% 50%, 30% 100%, 0% 100%);
}

.circle:nth-of-type(6)::before {
clip-path: polygon(0% 0%, 10% 0%, 50% 50%, 10% 100%, 0% 100%);
}

.circle:nth-of-type(7)::before {
clip-path: polygon(0% 10%, 50% 50%, 0% 90%, 0% 100%);
}

.circle:nth-of-type(8)::before {
clip-path: polygon(0% 30%, 50% 50%, 0% 70%, 0% 100%);
}

.circle:nth-of-type(9)::before {
clip-path: polygon(0% 45%, 50% 50%, 0% 55%, 0% 100%);
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Recent Tips

  1. BasicNetwork.performRequest: Unexpected response code 500 for http://192.168.1.195:85/tranxavApi/public/api/signup
  2. Laravel 5.1 Authentication without password
  3. django-bootstrap-v5 DecimalField Throwing Errors in ModelForm Class
  4. update and delete in realm xamarin
  5. Grabbing text between Processing Instructions in XSLT
  6. Foreign key refering to multiple tables
  7. Run a visual studio 2010 Windows7 project on a Windows XP machine
  8. How to apply groupname to HTML radio buttons in asp.net?
  9. What is the most stable modal dialog implementation across browsers to use from javascript for a web app?
  10. Move, Remove, and Replace information from Google Sheets with new entries using Google Script
  11. How can I get rid of jerkiness in WinForms scrolling animation?
  12. Update MySQL table column from another table entities
  13. Shoot fireball once in unity C#
  14. Adding a table of contents to a Microsoft Word Document using vbs
  15. Change locale in android app (onto Hindi)
  16. How do I stop selenium automation if 20% or 1st 20 test cases test methods are failed?
  17. Sharepoint with silverlight app
  18. What's the best way to write robots.txt for github pages using multiple repos?
  19. Biopython: Cant use .count() for biopython
  20. How can I find out the token balance of an address?
  21. ref value is undefined in vue (modal, textarea, $refs)
  22. Azure - HDInsight Hbase Data Insertion Failed
  23. SignalR overwriting OnConnected(), OnDisconnected()
  24. DatePickerDialog displays with two borders
  25. "type 'double' is not a subtype of type 'int' in type cast" error in flutter. What should i do?
  26. hiding the autocomplete list when user click outside the textbox is not working as expected
  27. JSF IceFaces basic problem with redisplaying input value
  28. How to validate material ui TextField in reactjs?
  29. Go and MongoDB connection won't work with panic log "no reachable server"
  30. WordPress Posts Pagination Not Working