How to Make a Semicircle (Right) with CSS

Learn two clean CSS techniques to draw a right-facing semicircle and see a live preview you can copy and paste into your project.

Live Preview: Semicircle (Right)

Method 1: Using Border-Radius

.semicircle-right {
  width: 75px;            /* half of the diameter */
  height: 150px;          /* full diameter */
  background: #cd5454;
  border-radius: 0 75px 75px 0; /* TL TR BR BL */
}

.semicircle-right {
  width: 75px;            /* half of the diameter */
  height: 150px;          /* full diameter */
  background: #cd5454;
  border-radius: 0 75px 75px 0; /* TL TR BR BL */
}

Method 2: Using Clip-Path on a Circle

.semicircle-right-clip {
  width: 150px;
  height: 150px;
  background: #cd5454;
  border-radius: 50%;           /* make a circle */
  clip-path: inset(0 0 0 50%);  /* keep the right half */
}

.semicircle-right-clip {
  width: 150px;
  height: 150px;
  background: #cd5454;
  border-radius: 50%;           /* make a circle */
  clip-path: inset(0 0 0 50%);  /* keep the right half */
}

How This Works

In the border-radius method, the element’s height is the circle’s diameter and its width is the radius. Rounding just the right corners to the radius value (top-right and bottom-right) creates a smooth semicircle on the right with a straight vertical edge on the left.

In the clip-path method, we first draw a full circle, then crop away the left half with inset(0 0 0 50%). The visible remainder is a right-facing semicircle.

How to Center Content Inside a Semicircle (Right)

The easiest way is to turn the shape into a flex or grid container and center children with one or two lines of CSS.

Method 1: Use CSS Flexbox

.semicircle-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.semicircle-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.semicircle-right {<br>  display: grid;<br>  place-items: center;<br>}

.semicircle-right {<br>  display: grid;<br>  place-items: center;<br>}

Optional: If you place content inside the border-radius semicircle and want it confined to the curved shape, add overflow: hidden to the container.

.semicircle-right {
  overflow: hidden;
}

.semicircle-right {
  overflow: hidden;
}

When to Use Each Shape Method

Use the border-radius method for a lightweight, box-friendly shape where the element’s box matches the visible shape width (good for layout). Use the clip-path method when you want to start from a true circle, animate cropping, or combine with masks, just note the element’s box remains the full circle for layout/flow, which can affect spacing and alignment. Hit testing (clicks/hover) respects clip-path, so the interactive area is limited to the visible clipped semicircle, not the full box.

Quick Customizations

Change the color via background: yourColor; and adjust the size by scaling the diameter (height) and matching the radius (half the height) in border-radius or the element’s width for the circular base. Mirror the direction with transform: scaleX(-1) to flip right to left.

Outlines:

• Border-radius method: A full outline works with border: 2px solid #000.
• Clip-path method: Borders are clipped to the half-circle and won’t draw along the straight cut edge. Use a pseudo-element with the same clip-path as a “stroke,” or switch to SVG for a true stroked outline.

/* Clip-path outline via pseudo-element */
.semicircle-right-clip {
  position: relative;            /* enable absolute positioning */
  width: 150px;
  height: 150px;
  background: #cd5454;
  border-radius: 50%;
  clip-path: inset(0 0 0 50%);
}

.semicircle-right-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: inset(0 0 0 50%);
  box-shadow: 0 0 0 2px #000;    /* stroke-like outline */
  pointer-events: none;          /* keep clicks on the element */
}

/* Clip-path outline via pseudo-element */
.semicircle-right-clip {
  position: relative;            /* enable absolute positioning */
  width: 150px;
  height: 150px;
  background: #cd5454;
  border-radius: 50%;
  clip-path: inset(0 0 0 50%);
}

.semicircle-right-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: inset(0 0 0 50%);
  box-shadow: 0 0 0 2px #000;    /* stroke-like outline */
  pointer-events: none;          /* keep clicks on the element */
}

Accessibility & SEO

If the semicircle conveys meaning, include accessible text nearby or add role=”img” and an aria-label on the element to describe its purpose.