CSS Border Radius Generator & Visual Styler
Design modern rounded corners, organic 8-point blob shapes, squircles, and stylized CSS borders visually. Adjust corner curves independently, configure custom borders, and export clean CSS code with 1 click.
-webkit-border-radius: 24px;
border: 2px solid #1d4ed8;
background-color: #3b82f6;
The Complete Guide to CSS Border Radius & Modern UI Shapes
The CSS border-radius property is one of the foundational building blocks of modern user interface design. Introduced in CSS Backgrounds and Borders Module Level 3, it freed frontend engineers from relying on complex slicing techniques, background PNG images, and nested tables to render rounded corners.
Our CSS border radius generator gives web designers and software developers an interactive, visual playground to craft everything from subtle 4px card bevels to organic, fluid 8-point morphing blob shapes. With real-time visual feedback, adjustable border thicknesses, and instant 1-click CSS clipboard export, you can design, test, and implement modern CSS shapes in seconds.
Understanding CSS Border Radius Syntax & Shorthand
The border-radius property accepts from one to four values to govern corner curvature. When you provide multiple values without a slash, they apply in strict clockwise order:
| Number of Values | Syntax Example | Mapping & Behavior |
|---|---|---|
| 1 Value | border-radius: 16px; |
Applies uniformly to all 4 corners (top-left, top-right, bottom-right, bottom-left). |
| 2 Values | border-radius: 12px 24px; |
1st value = top-left & bottom-right. 2nd value = top-right & bottom-left. |
| 3 Values | border-radius: 10px 20px 30px; |
1st = top-left. 2nd = top-right & bottom-left. 3rd = bottom-right. |
| 4 Values | border-radius: 8px 16px 24px 32px; |
Top-left, top-right, bottom-right, bottom-left (Clockwise from top-left). |
The 8-Value Slash Syntax: Creating Organic Blobs & Fluid Shapes
While standard rounded rectangles use circular corner arcs (where the horizontal and vertical radius of each corner are identical), CSS allows you to define elliptical corners by separating horizontal and vertical radii using a forward slash (/):
border-radius: [horizontal radii] / [vertical radii];
e.g., border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
In this elliptical configuration, each corner becomes an ellipse whose curvature can stretch independently along the X and Y axes. This is the exact technique used in award-winning SaaS websites to create breathing, asymmetrical blob illustrations and dynamic background accent shapes.
Pixels vs Percentage: The Aspect Ratio Pitfall
A critical consideration when building responsive components is whether to declare border radius in pixels (px) or percentages (%):
- Pixels (
px): Corners maintain a fixed, circular curvature regardless of the element's width or height. A 16px border-radius on a 400x100 button looks balanced and consistent with a 16px border-radius on a 200x50 button. - Percentages (
%): Corner arcs calculate relative to the container's physical dimensions. If an element has an unequal aspect ratio (e.g. 300px wide by 100px high), declaringborder-radius: 50%produces an elongated, distorted egg shape rather than a circular capsule. To achieve a true capsule or pill button on rectangular containers, use a large pixel value likeborder-radius: 9999px;.
Preventing Content Overflow in Rounded Containers
When placing photographs, background videos, or child <div> elements inside a container with rounded corners, the rectangular child content will frequently bleed beyond the curves. To resolve this visual bug, always declare overflow: hidden; on the parent container:
border-radius: 20px;
overflow: hidden; /* Clips child images and headers to the 20px curve */
}
Frequently Asked Questions About CSS Border Radius
The CSS border-radius property defines the radius of an element's outer border corners. It enables web developers to create rounded rectangles, perfect circles, pills, and complex organic shapes without requiring external graphics.
When you specify a slash '/' in border-radius (e.g., border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;), the values before the slash set the horizontal radii for the four corners, and the values after set the vertical radii. This creates elliptical corners that produce fluid, organic blob shapes.
To create a perfect circle, apply border-radius: 50% to an element with equal width and height (aspect ratio 1:1). For a capsule or pill button of any arbitrary width, declare border-radius: 9999px.
Pixel values provide static corner curvature regardless of element dimensions. Percentage values calculate curvature proportionally relative to the element's width and height, creating ellipses if the element is not a square.
The four values follow clockwise order starting from the top-left: top-left, top-right, bottom-right, and bottom-left.
Child elements do not automatically conform to parent border radius curves unless you declare overflow: hidden on the parent container. Adding overflow: hidden clips all interior children to match the rounded boundary.
Modern browsers across desktop and mobile have supported unprefixed standard border-radius since 2011. Vendor prefixes like -webkit- and -moz- are only needed if supporting extremely outdated legacy embedded WebViews or legacy browsers.
Because border-radius values are animatable numeric values, you can use CSS @keyframes to smoothly morph between different 8-value border-radius configurations, creating continuous living fluid animations.