How to Make a Semicircle (Top) with CSS

Want a clean half-circle that’s flat on the bottom and curved on top? Here are two reliable CSS techniques to draw a top semicircle, plus tips to center content inside and customize it quickly.

Live Preview: Semicircle (Top)

Method 1: Using Border-Radius

.semicircle-top {
  /* A perfect semicircle when height = width / 2 */
  width: 150px;
  height: 75px; /* half of width */
  background: #cd5454;
  border-radius: 75px 75px 0 0; /* TL TR BR BL */
}

/* Responsive variant (keeps the shape at any size) */
.semicircle-top--responsive {
  width: 12rem;
  aspect-ratio: 2 / 1; /* width is twice height */
  background: #cd5454;
  /* Elliptical radii to preserve a true semicircle */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.semicircle-top {
  /* A perfect semicircle when height = width / 2 */
  width: 150px;
  height: 75px; /* half of width */
  background: #cd5454;
  border-radius: 75px 75px 0 0; /* TL TR BR BL */
}

/* Responsive variant (keeps the shape at any size) */
.semicircle-top--responsive {
  width: 12rem;
  aspect-ratio: 2 / 1; /* width is twice height */
  background: #cd5454;
  /* Elliptical radii to preserve a true semicircle */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

Method 2: Using clip-path (Half of a Circle)

.semicircle-top {
  width: 150px;
  height: 150px; /* start with a circle */
  background: #cd5454;
  border-radius: 50%;
  /* Keep the top half, clip away the bottom 50% */
  clip-path: inset(0 0 50% 0);
}

.semicircle-top {
  width: 150px;
  height: 150px; /* start with a circle */
  background: #cd5454;
  border-radius: 50%;
  /* Keep the top half, clip away the bottom 50% */
  clip-path: inset(0 0 50% 0);
}

How This Works

The border-radius approach draws a rectangle whose height is half its width, then rounds the top corners by exactly half the width to form a perfect top semicircle. The elliptical border-radius variant with aspect-ratio keeps the shape accurate as it scales.

The clip-path approach creates a full circle and then masks the bottom half. This is great when you want to start from a circle or need more complex animations and transitions.

How to Center Content Inside a Semicircle (Top)

The easiest way is to turn the shape into a layout container using Flexbox or Grid and center items along both axes.

Method 1: Use CSS Flexbox

.semicircle-top {
  /* shape styles */
  width: 150px;
  height: 75px;
  background: #cd5454;
  border-radius: 75px 75px 0 0;

  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
}

.semicircle-top {
  /* shape styles */
  width: 150px;
  height: 75px;
  background: #cd5454;
  border-radius: 75px 75px 0 0;

  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.semicircle-top {
  /* shape styles */
  width: 150px;
  height: 75px;
  background: #cd5454;
  border-radius: 75px 75px 0 0;

  /* center content */
  display: grid;
  place-items: center;
}

.semicircle-top {
  /* shape styles */
  width: 150px;
  height: 75px;
  background: #cd5454;
  border-radius: 75px 75px 0 0;

  /* center content */
  display: grid;
  place-items: center;
}

When to Use Each Shape Method

Use border-radius when you want a simple, lightweight, and broadly compatible approach, great for static or responsive semicircles. Use clip-path when starting from a circle, when you need masking effects, or when you plan on more complex shape transitions and animations.

Quick Customizations

Change the color via background: #yourColor; and add an outline with border: 2px solid #333;. Want a bottom semicircle instead? Rotate with transform: rotate(180deg); or flip which side you clip in the clip-path method.

Accessibility & SEO

If the semicircle conveys meaning, provide an accessible name (e.g., aria-label on the container) or accompanying text; if purely decorative, mark it as aria-hidden=”true”.