Solution 1 :

You can do like this:

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid green;
  border-left: 5px solid white;
  transform: rotate(45deg);
<div id="circle"></div>

You just have to change rotate value, if you want to hide some other portions.

Solution 2 :

I’ve added a solution how i would code it with tailwind

Problem :

enter image description here

I mean the green rounded border that’s outside the check icon. Currently, I have the entire circle around the check but I’m really confused about how to introduce that little cut in the top-left corner.

Here’s the code:

<div v-if="verified" class="flex justify-center items-center border-3 border-green rounded-full">
  <svg viewBox="0 0 15 14" fill="none"  class="w-3 h-3">
            d="m10.51 4.525-3.6 3.6-1.65-1.65a.636.636 0 0 0-.9.9l2.1 2.1a.636.636 0 0 0 .9 0l4.05-4.05a.636.636 0 0 0-.9-.9z"

There’s the SVG, and I’m using Tailwind, so the border class is right there in the <div>. Any suggestion/help is greatly appreciated, thanks!


Comment posted by Chris Schober

You can look for: stroke-dasharray and stroke-dashoffset or even cooler using css border-image with an svg border or you you could simply add some content with pseudo elements. I think there is no right or wrong

Comment posted by Jon P

Link only answers are discouraged. If the link is down the answer becomes useless. Furthermore I good answer explains how the goal is achieved.