CODEWITHSUNDEEP
htmlcsscss-shapes
Dyin
Dyin

Reputation: 5376

Half circle with CSS (border, outline only)

I'm trying to create a circle with CSS, which looks exactly like on the following picture:

enter image description here

...with only one div:

<div class="myCircle"></div>

and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.

I've tried to draw a full circle and fading half of it with another div, and it does work, but I'm looking for a more elegant alternative.

Upvotes: 108

Views: 292507

Answers (6)

Temani Afif
Temani Afif

Reputation: 274272

An idea using gradient:

.box {
  width: 200px;
  aspect-ratio: 2;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(50% 100% at bottom,#0000 80%,red 80.5%);
}
<div class="box"></div>

Upvotes: 1

Anjan Talatam
Anjan Talatam

Reputation: 4044

Add a border to the semi-circle and remove the border-bottom

#semi-ring{
  height: 100px;
  /* width = 2* height */
  width: 200px;  
  border: 30px solid black;
  /* border-radius = height + border */
  border-radius: 130px 130px 0 0;
  border-bottom: transparent;
}
<div id="semi-ring"></div>

Upvotes: 2

Felix A J
Felix A J

Reputation: 6490

Below is a minimal code to achieve the effect.

This also works responsively since the border-radius is in percentage.

.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}
<div class="semi-circle"></div>

Upvotes: 24

朱钰鹏
朱钰鹏

Reputation: 119

I use a percentage method to achieve

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;

Upvotes: 11

mariomc
mariomc

Reputation: 975

I had a similar issue not long time ago and this was how I solved it

.rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>

Upvotes: 25

Hashem Qolami
Hashem Qolami

Reputation: 99564

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).

Then add a border to top/right/left sides of the box to achieve the effect.

Here you go:

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

WORKING DEMO.

Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

UPDATED DEMO. (Demo without background color)

Upvotes: 164

Related Questions