Half circle with CSS (border, outline only)

html

responsive-design

css

border-radius

byAlex Kataev·Nov 29, 2024

Make a half circle using CSS by giving a div a half-hidden look. Get the round shape with border-radius and hide the bottom half with overflow: hidden;. Border outline is handled by ::before pseudo-element.

.half-circle {
  width: 100px; 
  height: 50px; /* Half pizza size */
  overflow: hidden; /* Hide the stolen pizza part */
  border-radius: 100px 100px 0 0; /* Top half turns pizza into Pac-Man */
}

.half-circle::before {
  content: ''; 
  position: absolute;
  width: 100%; 
  height: 100%; /* Keeps the Pac-Man’s original appetite */
  border: 3px solid; /* Pac-Man shape defined */
  border-bottom: none; /* Bottom half hidden from Pac-Man */
  border-radius: 100%; /* Full pizza inside */
}

HTML setup:

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

Taking your semi-circle skills to the next level

Customization and experimentation are half the fun of CSS. Mold and morph your half circle infinitude ways by playing with borders and dimensions.

Sizing and border-strokes

Modify your half circle's silhouette by juggling the height, width, and border thickness to keep it a perfect ratio, and it will result in an aesthetique half circle. Or get creative, unleash the chaos and mess up the proportions for an empressé look.

.half-circle {
  width: 120px; height: 60px; /* Take half for a semi-circle diet */
  border-top: 8px solid #333; /* A little more on the top */
  border-left: 4px solid #333; /* A little less on the sides */
  border-right: 4px solid #333; /* Same for the right, symmetry isn’t sin */
}

Responsive design

In a world where devices are as varied as people, responsivity is key. Use percentage values in border-radius and width then set the height with padding-top as half the width's percentage and you have a half-circle that can turn heads in any viewport!

Cross-browser compatibility

Cross-browser issues can be a menace! (Cough, caniuse.com, cough.) Luckily, vendor prefixes are here to save the day.

.half-circle {
  -webkit-border-top-left-radius: 100%;
  -moz-border-radius-topleft: 100%;
  border-top-left-radius: 100%;
}

Dynamic orientation and shape control

###Rotating the semi-circle

Want to create a unique, rotating half-circle? CSS can do that. Apply the transform property and rotate to your satisfaction. Suddenly, your page has a frisbee in it!

.half-circle {
  transform: rotate(45deg); // Because not every half-circle biscuits should be horizontal
}

Elliptical shapes

A fan of ellipses? Create an elliptical semi-circle by modifying border-top-left-radius and border-top-right-radius to get that fine, extended curvature. Look, the moon’s on your page!

.half-circle {
  border-top-left-radius: 100% 200%; // A one sided egg, anyone?
  border-top-right-radius: 100% 200%; // Or a piece of naan?
}

Just remember, keep the height half the width.

Color and transparency

Fill the outline with color, or make a rainbow by setting transparent borders on sides not in use.

.half-circle {
  border-color: transparent #000000 transparent transparent; // Yes, borders can wear camo!
}

explain-codes / Html / Half circle with CSS (border, outline only)

Linked

Draw circle using CSS alone



Easier way to create circle div than using an image?



How to draw a circle in an HTML page?



How to use CSS to surround a number with a circle?



Css Inset Borders



How to increase space between dotted border dots



Css Circular Cropping of Rectangle Image



Taking your semi-circle skills to the next level Dynamic orientation and shape control