Want a clean quarter circle tucked into the top-right corner? Here are two CSS approaches to build a crisp, reusable “Quarter Circle (Top-Right)” shape for your UI.
Live Preview: Quarter Circle (Top-Right)
Method 1: Using clip-path + border-radius
.quarter-circle-tr-clip {
width: 150px;
height: 150px;
background: #cd5454;
border-radius: 50%;
/* Keep only the top-right quadrant of the circle */
clip-path: inset(0 0 50% 50%);
/* Optional: center the element itself */
display: block;
margin-left: auto;
margin-right: auto;
}Method 2: Using a conic-gradient slice
.quarter-circle-tr-conic {
width: 150px;
height: 150px;
/* Draw a 90° sector at the top-right:
rotate the start angle by -90deg so 0deg is at the top (12 o'clock) */
background: conic-gradient(from -90deg, #cd5454 0 90deg, transparent 90deg);
border-radius: 50%;
/* Optional: center the element itself */
display: block;
margin-left: auto;
margin-right: auto;
}How This Works
With clip-path, we first create a perfect circle using border-radius: 50%, then “crop” the element to only show the top-right 50% x 50% quadrant. The arc you see is the circle’s edge.
With conic-gradient, we paint a 90-degree pie slice on a circular background (border-radius: 50%). In CSS conic gradients, 0deg points to the right (3 o’clock) and angles increase clockwise; we rotate by -90deg so the slice spans from top (0deg) to right (90deg) in the top-right quadrant.
How to Center Content Inside a Quarter Circle (Top-Right)
Because the element’s layout box is still the full 150×150 square, naïvely centering with Flexbox/Grid puts content at the circle’s center (the quarter’s inner corner), where it gets clipped. Use one of these approaches instead:
Method 1: Use CSS Flexbox (anchor to the visible corner)
.quarter-circle-tr-clip {
width: 150px;
height: 150px;
background: #cd5454;
border-radius: 50%;
clip-path: inset(0 0 50% 50%);
display: flex;
/* Anchor to the visible top-right corner of the quarter */
justify-content: flex-end;
align-items: flex-start;
/* Nudge inward so content sits inside the arc, not on the edges */
padding: 12px;
}
.quarter-circle-tr-clip > .content {
/* Optional fine-tune: move left and down toward the arc */
transform: translate(-10%, 10%);
}Method 2: Use CSS Grid (anchor to the visible corner)
.quarter-circle-tr-clip {
width: 150px;
height: 150px;
background: #cd5454;
border-radius: 50%;
clip-path: inset(0 0 50% 50%);
display: grid;
/* place-items: start end == align-items: start; justify-items: end */
place-items: start end;
padding: 12px; /* nudge inward */
}
.quarter-circle-tr-clip > .content {
transform: translate(-10%, 10%); /* optional fine-tune */
}Alternative: Center by matching the layout box to the visible area
Restructure so the layout box is the 75×75 visible quarter, then center within that box.
.quarter-tr-wrapper {
width: 75px;
height: 75px;
position: relative;
display: grid;
place-items: center; /* true centering inside the visible quarter */
overflow: hidden; /* ensure nothing spills */
}
.quarter-tr-wrapper::before {
content: "";
position: absolute;
top: 0;
right: 0; /* anchor the circle to the wrapper's top-right */
width: 150px;
height: 150px;
background: #cd5454;
border-radius: 50%;
clip-path: inset(0 0 50% 50%); /* show only the top-right quarter */
}When to Use Each Shape Method
Use clip-path for a straightforward, well-supported shape that clips cleanly and is easy to size responsively. Use conic-gradient if you like the simplicity of a painted “slice” with full control over angles, but note that very old browsers may not support conic-gradient; provide a fallback if needed.
Quick Customizations
Change the color by editing background: #cd5454; and resize by adjusting width/height equally. To add a border-like edge, layer a box-shadow or wrap the shape in a container and add padding plus a contrasting background behind it.
Accessibility & SEO
If the quarter circle is decorative, mark it aria-hidden=”true” or hide it from assistive tech; if it conveys meaning, include nearby text that describes its purpose.