3

I have such code:

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

and css:

.circle {
 border-left: 1px solid red;
 border-bottom: 1px solid red;
 border-radius: 200px;
 width: 200px;
 height: 200px;
}

but i get such border:

enter image description here

how i can achive a straight and rounded border?

i mean something like this:

enter image description here

is it possible with css?

brabertaser19
  • 5,678
  • 16
  • 78
  • 184

2 Answers2

8

Svg circles

Creating a 3/4 of a circle with svg is just a few lines of code:

#cut-circ {
  stroke-dasharray: 110;
  stroke-dashoffset: 0;
}
<svg id="cut-circ" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="23" stroke="red" fill="gray" />
</svg>

or css

.circ {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: inline-block;
  background-color: gray;
  border-top: 3px solid transparent;
  border-left: 3px solid red;
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  transform: rotate(45deg);
}
<div class="circ"></div>

comment what if i have inner span with text there?

Svg circle with text

#cut-circ circle {
  stroke-dasharray: 110;
  stroke-dashoffset: 0;
}
#cut-circ text {
  font-size: 10px;
  transform: translate(-13px, 2.5px);
}
<svg id="cut-circ" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="23" stroke="red" fill="gray" />
  <text x="50" y="50">Foobar</text>
</svg>

Css circle with text

.circ {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: inline-block;
  background-color: gray;
  border-top: 3px solid transparent;
  border-left: 3px solid red;
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  transform: rotate(45deg);
}
.circ span {
  display: inline-block;
  transform: rotate(-45deg) translate(-10px, 70px);
  font-size: 2em;
}
<div class="circ">
  <span>Typo</span>
</div>
Persijn
  • 14,624
  • 3
  • 43
  • 72
5

You need to set the 3 of the 4 borders to be left, and the 4th to be white, then rotate it with -45 degrees

#circle {
  background-color: grey;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid red;
  border-right: 1px solid white;
  transform: rotate(-45deg);
}
<div id="circle"></div>
Bálint
  • 4,009
  • 2
  • 16
  • 27