How to make a doughnut segment using only CSS

Question

How to make this shape use only css

What I have tried:

Answer 1

In case you prefer your border method more than SVG or gradients, here is an approach using just border-radius, the pseudo element ::after and some positioning:

.shape,
.shape::after {
  position: absolute;
  border-radius: 100%;
}

.shape {
  height: 200px;
  width: 200px;
  border: 100px solid transparent;
  border-top: 100px solid #375c89;
}

.shape::after {
  content: '';
  height: 190px;
  width: 198px;
  top: -95px;
  left: -89px;
  border: 90px solid transparent;
  border-top: 90px solid #4f81bc;
}

How it works

You can create this shape in two steps.

Step 1: Create a doughnut segment using border-radius: 100% to give it a circle like shape. Then apply a color only to the top border and make the other borders transparent. This way you get a circle segment. Now give your element a width and a height greater than 0 to transform the circle into a doughnut.

Step 2: Apply the same styles to the pseudo element ::after but giving it a slightly less width,height and border width. Adjust the values for your needs. Now position both elements with position: absolute to adjust the position of the overlapping pseudo element to center it properly over the main element.

The good

• Better browser compatibility especially for older browsers than gradients, clip-path or SVG.
• The angle of the circular shape can simply be adjusted with height and width

The bad

• As the other parts of the border are still there (transparent) you need to adjust the size of the parent element according to the shape and set overflow: hidden;
• for changing the border width of the shape, you need to reposition the ::after element

---

You can as well use both pseudo elements ::before and ::after to create the shape and easily adjust the position with sizing and margin (thanks to Temani for pointing this out in the comments):

.shape {
  position: relative;
  width: 400px;
  height: 400px;
}

.shape::before,
.shape::after {
  content: '';
  position: absolute;
  border-radius: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
}

.shape:before {
  border: 100px solid transparent;
  border-top-color: #375c89;
}

.shape::after {
  margin: 5px 12px;
  border: 90px solid transparent;
  border-top-color: #4f81bc;
  height: 45%;
}