Learn two reliable ways to draw a bottom-right quarter circle using pure CSS, plus quick tips for centering content and customizing the look for your UI.
Live Preview: Quarter Circle (Bottom-Right)
Method 1: Using Borders
/* Bottom-right quarter circle via the border trick */
.quarter-circle-br {
/* scalable radius */
--r: 120px;
width: 0;
height: 0;
border-bottom-right-radius: var(--r); /* radius */
border-right: var(--r) solid #cd5454; /* color + size = radius */
border-bottom: var(--r) solid #cd5454; /* color + size = radius */
border-top: 0 solid transparent;
border-left: 0 solid transparent;
/* optional: center the visible shape horizontally
The visible width equals the radius, so shift by half the radius */
position: relative;
left: 50%;
transform: translateX(calc(-0.5 * var(--r)));
margin: 20px 0;
/* Alternative centering (choose this instead of left/transform):
margin-left: calc(50% - 0.5 * var(--r)); */
}Method 2: Using clip-path
/* Quarter circle kept from a full circle clipped to the bottom-right */
.quarter-circle-clip {
width: 150px;
height: 150px;
background: #cd5454;
/* circle radius equals 150px; center at bottom-right corner */
clip-path: circle(150px at 100% 100%);
/* optional demo centering (works because the element has width) */
display: block;
margin: 20px auto;
}How This Works
The border method draws two thick borders (right and bottom) and rounds their intersection with border-bottom-right-radius, producing a clean quarter circle with a transparent outside area. It’s lightweight and doesn’t require extra wrappers.
The clip-path method starts with a square filled with color, then reveals only the part of a circle whose center sits at the bottom-right corner, leaving you with the quadrant. This approach preserves a real content box, which is helpful if you need text or icons inside.
How to Center Content Inside a Quarter Circle (Bottom-Right)
Flexbox or Grid is the easiest way. Note: centering content works best with the clip-path method because it retains a normal content box; the border method uses a zero-sized box and isn’t suitable for inner content.
Method 1: Use CSS Flexbox
.quarter-circle-clip {
width: 150px;
height: 150px;
background: #cd5454;
clip-path: circle(150px at 100% 100%);
/* center inner content */
display: flex;
justify-content: center;
align-items: center;
color: #fff; /* optional for contrast */
}Method 2: Use CSS Grid
.quarter-circle-clip {
width: 150px;
height: 150px;
background: #cd5454;
clip-path: circle(150px at 100% 100%);
/* center inner content */
display: grid;
place-items: center;
color: #fff; /* optional for contrast */
}When to Use Each Shape Method
Use the border method when you need a purely decorative quarter circle with minimal CSS and no inner content. Choose the clip-path method when you need to place and center text/icons inside the shape, animate it, or fine-tune responsiveness, note that clip-path requires modern browser support.
Quick Customizations
Change the color by editing the border colors (border method) or background (clip-path method). Adjust the size by changing the border thickness and border-bottom-right-radius to the same value (border method), or by changing the element’s width/height and the clip-path circle radius (clip-path method).
Outline/stroke:
- clip-path shapes: For a true “stroke,” use a pseudo-element behind, slightly larger, with the same clip-path. You can also approximate a 1px outline by stacking zero-blur drop-shadows around the shape, e.g.: filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000). For robust, controllable strokes, use SVG.
- border method: box-shadow won’t trace the curved border-generated shape reliably. Use an extra wrapper or a ::before/::after layer to fake an outline, or switch to clip-path/SVG for a true stroke.
Accessibility & SEO
If the quarter circle is purely decorative, mark it with aria-hidden=”true” (optionally role=”presentation”).
If it conveys meaning, ensure it’s announced properly. Either:
- Give the element role=”img” with aria-label=”Meaningful description”, or
- Use aria-labelledby to reference nearby text, or
- Include visually hidden text that describes the shape’s purpose.