CSS Border Radius Generator

About CSS Border Radius Generator

How Does the border-radius Shorthand Work?

The border-radius shorthand accepts between one and four values. The number of values you provide determines which corners get which radius, following a clockwise order starting from the top-left corner.

Values	Meaning	Example
1 value	All four corners the same	border-radius: 12px;
2 values	Top-left/bottom-right, top-right/bottom-left	border-radius: 12px 0;
3 values	Top-left, top-right/bottom-left, bottom-right	border-radius: 12px 8px 0;
4 values	Top-left, top-right, bottom-right, bottom-left (clockwise)	border-radius: 12px 8px 4px 0;

The order follows the clock: top-left, top-right, bottom-right, bottom-left. This generator outputs the four-value syntax when corners differ, or collapses to the single-value shorthand when all four match. You can also use the individual longhand properties - border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius - if you prefer explicit control. The longhand properties are handy when you only need to override one corner in a component that inherits a base radius from a parent class.

Pixels vs Percentages - Which Unit Should You Use?

Unit	Behaviour	Best For
px	Fixed radius regardless of element size	Consistent corner rounding (buttons, cards, inputs)
%	Relative to element dimensions (width for horizontal, height for vertical)	Responsive shapes (circles, ellipses)
rem	Relative to root font size (usually 16px = 1rem)	Scalable design systems (Tailwind, Bootstrap)
em	Relative to parent font size	Typography-relative rounding (inline badges)

50% on a square element creates a perfect circle. 50% on a rectangle creates an ellipse. Using 9999px (a very large pixel value) creates fully rounded ends regardless of element size - the standard technique for pill-shaped buttons. In practice, most teams use px for fixed UI components and % or rem for responsive layouts.

Worked example: Say you have a card that is 300px wide and 200px tall with border-radius: 20%. The top-left corner gets a horizontal radius of 60px (20% of 300) and a vertical radius of 40px (20% of 200). Because the element is not square, each corner becomes a subtle ellipse rather than a circular arc. Switch to border-radius: 20px and every corner gets a uniform 20px circular arc regardless of the card's dimensions.

Common Border Radius Patterns

Shape	CSS	Use Case
Subtle rounding	border-radius: 4px;	Inputs, small buttons
Card rounding	border-radius: 8px; or 12px;	Content cards, panels
Pill / capsule	border-radius: 9999px;	Tags, badges, pill buttons
Circle	border-radius: 50%; (equal width/height)	Avatars, icon containers
Leaf	border-radius: 0 50% 0 50%;	Decorative accents
Drop	border-radius: 50% 50% 50% 0;	Map pins, callouts
Ticket notch	border-radius: 12px 12px 50% 50%;	Ticket or coupon shapes
Blob	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;	Organic decorative shapes

The pill pattern (9999px) works because the browser clamps the radius to half the element's shortest side. So on a 40px-tall button, border-radius: 9999px effectively becomes 20px on each corner, producing perfectly rounded ends no matter how wide the button is. This is why 9999px is preferred over 50% for pills - percentage-based pills break on non-square elements.

The Elliptical Radius (Two-Part Syntax)

CSS border-radius supports an advanced slash syntax for elliptical corners:

border-radius: 50px / 25px;

Values before the slash set the horizontal radii; values after the slash set the vertical radii. This creates corners that curve differently in each direction - useful for organic blob-like shapes and decorative elements. Each side of the slash can take 1-4 values following the same clockwise rules, so the full syntax supports eight independent values:

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

This generator focuses on the more common single-value-per-corner syntax, but understanding the slash notation is useful when you need to create more complex organic forms. Combined with the CSS Gradient Generator, elliptical radius shapes can produce eye-catching decorative backgrounds.

Border Radius in Popular Design Systems

Every major design system defines a radius scale. Using these values keeps your UI consistent with widely-tested patterns. Here are the defaults as of early 2026:

Design System	Small	Medium	Large	Full / Pill
Tailwind CSS v4	rounded-sm (4px)	rounded-md (6px)	rounded-lg (8px)	rounded-full (infinity)
Material Design 3	Extra Small: 4dp	Small: 8dp / Medium: 12dp	Large: 16dp / XL: 28dp	Fully rounded
Bootstrap 5.3	0.25rem (4px)	0.375rem (6px)	0.5rem (8px)	50rem (pill)

Tailwind CSS v4 reorganised the scale - the old rounded-sm (2px) became rounded-xs, and a new rounded-4xl (32px) was added. Each class now maps to a CSS custom property (like --radius-md), making it easy to override the entire scale project-wide via @theme. rounded-full now uses calc(infinity * 1px) instead of the old 9999px hack. Bootstrap 5.3 similarly uses CSS custom properties (--bs-border-radius etc.) that you can set in your theme. Material Design 3 extended its scale to include Large Increased (20dp), Extra Large Increased (32dp), and Extra Extra Large (48dp) for larger container surfaces.

What About Squircles and the CSS corner-shape Property?

Apple's interfaces use "continuous corners" (also called squircles) where the curvature transitions smoothly into the straight edge, rather than the abrupt circular-arc-to-straight join that CSS border-radius produces. CSS border-radius draws a quarter-circle arc at each corner, which creates a visible inflection point where the curve meets the flat side.

As of early 2026, a new CSS corner-shape property is available in Chrome 139+ and other Chromium-based browsers (roughly 66% global support). It adds several corner shape options: squircle (the smooth superellipse curve Apple popularised), bevel, notch, and scoop. WebKit support (Safari) is expected soon. In the meantime, border-radius remains the universal standard, and the squircle effect can be approximated with SVG clip paths or JavaScript libraries like Squircle.js for the small number of cases where the visual difference matters.

For most web projects, standard circular-arc border-radius is perfectly fine. The difference between a squircle and a circular arc is only noticeable at larger radii (above roughly 20px), and most UI elements use 4-16px radii where the two curves are nearly identical.

Browser Support

The border-radius property has been universally supported across all browsers since IE9 (released in 2011). No vendor prefixes are needed. The elliptical two-value slash syntax and percentage values are also fully supported. According to Can I Use, border-radius has over 98% global browser support, making it one of the safest CSS properties to use without any fallback.

Common Mistakes with Border Radius

These are the issues that come up most often when working with border-radius in production code:

Using 50% for pills: Setting border-radius: 50% on a non-square element creates an ellipse, not a pill shape. The percentage is calculated relative to each axis independently - 50% of width for horizontal curves, 50% of height for vertical curves. For pill buttons, always use a large pixel value like 9999px instead.

Forgetting overflow: hidden: Child content (especially images and backgrounds) ignores the parent's rounded corners by default. A card with border-radius: 12px containing a full-width hero image will show square corners on the image unless the card has overflow: hidden.

Inconsistent nesting: When you nest rounded elements (a card inside a card, or an image inside a rounded container), the inner element's radius should be smaller than the outer element's radius by roughly the padding between them. If the outer card has 16px radius and 8px padding, the inner element should use about 8px radius. Matching radii on nested elements creates a visible gap where the curves do not align.

Ignoring the border width offset: Border radius applies to the outer edge of the border. The inner edge gets a smaller effective radius (outer radius minus border width). With thick borders (4px+), the inner corners can appear noticeably sharper than the outer ones. Account for this by adding the border width to your desired visual radius.

Animating radius directly: Changing border-radius in a transition or animation triggers a paint on every frame. For smooth shape transitions, consider animating clip-path instead, or use a fixed radius and animate the element's dimensions with transforms.

Tips for Getting Border Radius Right

Establish a scale: Pick 3-5 radius values for your project and stick to them. A common scale is 4px (inputs), 8px (cards), 12px (modals), and 9999px (pills). Random one-off values create visual inconsistency. Tailwind's rounded scale is a good starting point if you do not have a design system yet.

Match radii to element size: Larger elements can handle larger radii. A 16px radius on a modal dialog looks proportional, but the same 16px on a small 32px-tall button looks oddly rounded. Scale your radius in proportion to the element's shortest dimension - a ratio of roughly 10-25% of element height works well for most UI components.

Test at mobile widths: Elements that look great at desktop widths can appear over-rounded on narrow mobile screens where the element shrinks. Use responsive radius values or make sure your chosen pixel values still look good at 320px viewport width.

Performance note: Border radius is GPU-accelerated in all modern browsers and causes no layout recalculations during static rendering. It is one of the cheapest CSS properties to apply, so there is no reason to avoid it on performance grounds.

For adding depth to rounded elements, combine your border-radius with shadows from the CSS Box Shadow Generator. Layered box shadows on rounded containers create a natural lifted-card effect that works well for modals, dropdowns, and floating action buttons. For more complex shape clipping beyond what border-radius can achieve, the CSS Clip Path Generator handles custom polygons, ellipses, and SVG-based masks.

Sources

• MDN - border-radius CSS property reference
• W3C - CSS Backgrounds and Borders Module Level 3 (border-radius)
• MDN - Elliptical border radius syntax
• Material Design 3 - Shape scale guidelines
• Apple Human Interface Guidelines - Layout and corner radii
• Tailwind CSS - border-radius utility scale