Half circle with CSS border outline only

Question

I m trying to create a circle with CSS  which looks exactly like on the following picture        with only one div    lt div class  myCircle  gt  lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

I had a similar issue not long time ago and this was how I solved it   x000D   x000D   rotated-half-circle   x000D       Create the circle    x000D    width  40px  x000D    height  40px  x000D    border  10px solid black  x000D    border-radius  50   x000D       Halve the circle    x000D    border-bottom-color  transparent  x000D    border-left-color  transparent  x000D       Rotate the circle    x000D    transform  rotate -45deg   x000D    x000D   lt div class  rotated-half-circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Below is a minimal code to achieve the effect    This also works responsively since the border-radius is in percentage    x000D   x000D   semi-circle  x000D  width  200px  x000D  height  100px  x000D  border-radius  50  50  0 0   100  100  0 0  x000D  border  10px solid  000  x000D  border-bottom  0  x000D    x000D   lt div class  semi-circle  gt  lt  div gt  x000D   x000D   x000D

[html] Half circle with CSS (border, outline only)

Examples related to html

Examples related to css

Examples related to css-shapes