How to Make a Semicircle (Left) with CSS

Learn how to draw a clean left-facing semicircle in pure CSS. Below are two easy methods you can copy, plus tips for centering content inside the shape.

Live Preview: Semicircle (Left)

Method 1: Using border-radius (Corner Radii)

.semicircle-left {
  /* Height = diameter, Width = radius */
  width: 75px;
  height: 150px;
  background: #cd5454;
  border-radius: 75px 0 0 75px; /* top-left, top-right, bottom-right, bottom-left */
}

/* Optional centering in a layout */
.wrapper {
  display: grid;
  place-items: center;
}

Method 2: Using clip-path (SVG path)

.semicircle-left {
  width: 150px;   /* diameter */
  height: 150px;  /* diameter */
  background: #cd5454;
  /* Draw a half circle on the left, flat edge on the right */
  -webkit-clip-path: path('M75 0 A75 75 0 0 0 75 150 Z');
  clip-path: path('M75 0 A75 75 0 0 0 75 150 Z');
}

/* Optional centering in a layout */
.wrapper {
  display: grid;
  place-items: center;
}

How This Works

With border-radius, you set the element’s height to the semicircle’s diameter and its width to the radius, then round only the left corners (top-left and bottom-left) to the radius value. Those two quarter curves combine into a smooth left-facing semicircle.

With clip-path, you draw a 150×150 circle and clip it along a path that traces the left half of the circle, leaving a flat line on the right. This is very precise and keeps the DOM simple when you need exact control over the arc.

How to Center Content Inside a Semicircle (Left)

The easiest way is to turn the shape into a flex or grid container and center its children, with one important difference between methods:

Border-radius version (75×150 box)

Centering works as expected because the box’s width equals the semicircle’s width.

.semicircle-left {
  width: 75px;
  height: 150px;
  background: #cd5454;
  border-radius: 75px 0 0 75px;

  display: grid;         /* or flex */
  place-items: center;   /* justify-content/align-items for flex */
}

clip-path version (150×150 box)

Centering the child will place it on the flat clipping edge (x = 75px), so it can be cut off. Fix by offsetting the child to the left, or by centering inside a half-width inner wrapper.

Option A: Offset the centered child

.semicircle-left {
  width: 150px;
  height: 150px;
  background: #cd5454;
  -webkit-clip-path: path('M75 0 A75 75 0 0 0 75 150 Z');
  clip-path: path('M75 0 A75 75 0 0 0 75 150 Z');

  display: grid;
  place-items: center;
}

.semicircle-left > * {
  position: relative;
  left: -25%; /* 25% of parent width = 37.5px */
}

Option B: Center within a left-half inner wrapper

.semicircle-left {
  position: relative;
  width: 150px;
  height: 150px;
  background: #cd5454;
  -webkit-clip-path: path('M75 0 A75 75 0 0 0 75 150 Z');
  clip-path: path('M75 0 A75 75 0 0 0 75 150 Z');
}

.semicircle-left .center {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;   /* left half of the square */
  height: 100%;
  display: grid;
  place-items: center;
}

When to Use Each Shape Method

Use border-radius for the simplest, most compatible solution with minimal code. Use clip-path when you need exact path control, animated reveals, or consistent sizing inside a fixed square box (e.g., masking images or gradients).

Borders and Strokes

Border-radius method: Adding a border works as expected; the border follows the rounded edge.

clip-path method: The CSS border outlines the element’s rectangle and is then clipped; it won’t trace the circular arc. Alternatives:

• Use SVG for a true stroke.

<svg width="150" height="150" viewBox="0 0 150 150" role="img" aria-label="Left-facing semicircle">
  <path d="M75 0 A75 75 0 0 0 75 150 Z" fill="#cd5454" stroke="#000" stroke-width="4" />
</svg>

• Fake a stroke by layering: place a slightly larger clipped element/pseudo-element behind the filled one as the “border.”

• Use an SVG mask to outline the arc while keeping CSS layout for the rest.

Quick Customizations

Change the color via background: #yourcolor;. For different sizes, scale the height (diameter) and set width to half that value; update the matching radius values accordingly. To add a border, prefer the border-radius method (border: 2px solid #000;). For clip-path shapes, see the “Borders and Strokes” notes above.

Accessibility & SEO

If the semicircle conveys meaning, ensure it’s announced to assistive tech. On a generic element, include role=”img” with aria-label, or use a semantic container like a figure with a caption. If it’s purely decorative, hide it from screen readers.

<!-- Meaningful shape -->
<div class="semicircle-left" role="img" aria-label="Left-facing semicircle indicating previous step"></div>

<!-- Decorative shape -->
<div class="semicircle-left" aria-hidden="true"></div>