Learn two reliable CSS techniques to draw a clean bottom semicircle and see a live preview you can copy-paste. Both approaches are lightweight, responsive-friendly, and easy to customize.
Live Preview: Semicircle (Bottom)
Method 1: Using Border-Radius (Single Element)
.semicircle-bottom {
width: 150px;
height: 75px; /* half of width for a perfect semicircle */
background: #cd5454;
border-bottom-left-radius: 150px 150px;
border-bottom-right-radius: 150px 150px;
/* Center horizontally (optional) */
display: block;
margin-left: auto;
margin-right: auto;
}
Method 2: Clip a Circle with Overflow (Pseudo-Element)
.semicircle-bottom {
width: 150px;
height: 75px; /* container shows only the bottom half */
position: relative;
overflow: hidden;
/* Center horizontally (optional) */
display: block;
margin-left: auto;
margin-right: auto;
}
.semicircle-bottom::before {
content: "";
position: absolute;
left: 0;
top: -75px; /* move circle up so only its bottom half is visible */
width: 150px;
height: 150px;
background: #cd5454;
border-radius: 50%;
}
How This Works
Border-radius lets you round just the bottom corners of a rectangle. When the element’s height is exactly half of its width and both bottom corners are set to a high radius, you get a perfect bottom semicircle with a flat top edge.
The overflow method draws a full circle using a pseudo-element and then clips its top half by hiding it inside a shorter parent. This produces the same shape and can be handy when you want to animate or swap the inner circle independently.
How to Center Content Inside a Semicircle (Bottom)
The easiest way is to turn the semicircle into a layout container and center children with Flexbox or Grid.
Method 1: Use CSS Flexbox
.semicircle-bottom {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
Method 2: Use CSS Grid
.semicircle-bottom {
display: grid;
place-items: center;
}
When to Use Each Shape Method
Use border-radius for the simplest, single-element solution with broad support and minimal CSS. Use the overflow + pseudo-element approach if you need more control over the curved part (e.g., layering, independent animations, or different effects) without altering the container itself.
Quick Customizations
Change the color by updating background: #cd5454; to any brand color or CSS variable. Adjust size by changing width and setting height to half the width. Add a border or shadow (e.g., border: 2px solid #333; box-shadow: 0 2px 8px rgba(0,0,0,0.2);) for extra definition.
Accessibility & SEO
If the semicircle conveys meaning, include descriptive text nearby or add an aria-label on the element; if it’s decorative only, set it to aria-hidden=”true”.