What is CSS border-radius and how does it work?

border-radius is a CSS property that rounds the corners of an element's outer border edge. You can set different values for each corner to create circles, pills, rounded rectangles, and organic shapes. It's essential for modern UI design.

How do I create border-radius online?

Adjust corner values using sliders or input fields. Link/unlink corners for uniform or individual control. Preview the shape in real-time. Choose from presets (rounded, pill, circle) or create custom shapes. Copy the generated CSS code.

What order are the border-radius values?

The order is clockwise from top-left: top-left, top-right, bottom-right, bottom-left. Shorthand: 1 value (all corners), 2 values (top-left/bottom-right, top-right/bottom-left), 3 values (top-left, top-right/bottom-left, bottom-right), 4 values (each corner).

How do I make a perfect circle with CSS?

Use border-radius: 50% on a square element (equal width and height). The element must have equal dimensions. For non-square elements, 50% creates an ellipse. Example: width: 100px; height: 100px; border-radius: 50%;

How do I make a pill shape with border-radius?

Use a very large value like border-radius: 9999px or border-radius: 999em. This works on any rectangular element regardless of dimensions. The corners will be fully rounded, creating a pill/capsule shape.

Can I use percentages for border-radius?

Yes! Percentages are relative to the element's dimensions. 50% creates an ellipse (or circle if square). Percentages can create different effects than fixed values, especially on responsive elements that change size.

What are elliptical corners in border-radius?

Use the / syntax to create corners with different horizontal and vertical radii: border-radius: 10px / 20px creates corners that are 10px wide and 20px tall. Each corner can have its own elliptical values for organic shapes.

Does border-radius work with borders?

Yes! border-radius affects both the element background and its border. The border follows the rounded corners. The inner radius is calculated as outer radius minus border width, so thick borders have tighter inner curves.

Can I animate border-radius?

Yes! border-radius can be animated with CSS transitions for smooth corner changes. Example: transition: border-radius 0.3s ease. Great for hover effects, morphing shapes, and interactive UI elements.

Is border-radius supported in all browsers?

Yes! border-radius has excellent browser support in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes needed. Supported since IE9.

Does border-radius affect child elements?

Child elements are clipped to the rounded corners only if the parent has overflow: hidden. Otherwise, children may extend beyond the rounded corners. Use overflow: hidden to ensure children respect the border-radius.

How do I create a rounded rectangle?

Use a moderate border-radius value like 8px, 12px, or 16px. Common UI patterns: buttons (8px), cards (12px), modals (16px). Tailwind uses: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px).

Can I round only specific corners?

Yes! Use individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use shorthand with 4 values. Great for tabs, cards attached to edges, and asymmetric designs.

What is the difference between border-radius and clip-path?

border-radius only creates rounded corners. clip-path can create any shape (polygons, circles, ellipses, custom paths). Use border-radius for simple rounded corners, clip-path for complex shapes like triangles, stars, or custom curves.

Is my border-radius configuration secure when using this tool?

Yes! All border-radius generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

What is CSS border-radius and how does it work?

border-radius is a CSS property that rounds the corners of an element's outer border edge. You can set different values for each corner to create circles, pills, rounded rectangles, and organic shapes. It's essential for modern UI design.

How do I create border-radius online?

Adjust corner values using sliders or input fields. Link/unlink corners for uniform or individual control. Preview the shape in real-time. Choose from presets (rounded, pill, circle) or create custom shapes. Copy the generated CSS code.

What order are the border-radius values?

The order is clockwise from top-left: top-left, top-right, bottom-right, bottom-left. Shorthand: 1 value (all corners), 2 values (top-left/bottom-right, top-right/bottom-left), 3 values (top-left, top-right/bottom-left, bottom-right), 4 values (each corner).

How do I make a perfect circle with CSS?

Use border-radius: 50% on a square element (equal width and height). The element must have equal dimensions. For non-square elements, 50% creates an ellipse. Example: width: 100px; height: 100px; border-radius: 50%;

How do I make a pill shape with border-radius?

Use a very large value like border-radius: 9999px or border-radius: 999em. This works on any rectangular element regardless of dimensions. The corners will be fully rounded, creating a pill/capsule shape.

Can I use percentages for border-radius?

Yes! Percentages are relative to the element's dimensions. 50% creates an ellipse (or circle if square). Percentages can create different effects than fixed values, especially on responsive elements that change size.

What are elliptical corners in border-radius?

Use the / syntax to create corners with different horizontal and vertical radii: border-radius: 10px / 20px creates corners that are 10px wide and 20px tall. Each corner can have its own elliptical values for organic shapes.

Does border-radius work with borders?

Yes! border-radius affects both the element background and its border. The border follows the rounded corners. The inner radius is calculated as outer radius minus border width, so thick borders have tighter inner curves.

Can I animate border-radius?

Yes! border-radius can be animated with CSS transitions for smooth corner changes. Example: transition: border-radius 0.3s ease. Great for hover effects, morphing shapes, and interactive UI elements.

Is border-radius supported in all browsers?

Yes! border-radius has excellent browser support in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes needed. Supported since IE9.

Does border-radius affect child elements?

Child elements are clipped to the rounded corners only if the parent has overflow: hidden. Otherwise, children may extend beyond the rounded corners. Use overflow: hidden to ensure children respect the border-radius.

How do I create a rounded rectangle?

Use a moderate border-radius value like 8px, 12px, or 16px. Common UI patterns: buttons (8px), cards (12px), modals (16px). Tailwind uses: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px).

Can I round only specific corners?

Yes! Use individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use shorthand with 4 values. Great for tabs, cards attached to edges, and asymmetric designs.

What is the difference between border-radius and clip-path?

border-radius only creates rounded corners. clip-path can create any shape (polygons, circles, ellipses, custom paths). Use border-radius for simple rounded corners, clip-path for complex shapes like triangles, stars, or custom curves.

Is my border-radius configuration secure when using this tool?

Yes! All border-radius generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

Border Radius Generator

simple

Create CSS border-radius with individual corner control. Make circles, pills, rounded rectangles, and custom shapes with live preview.

Web Developmentcssborder-radiusroundedcorners

100% Private - Runs Locally

How to Use

1Adjust corner values
2Link/unlink corners
3Preview shape
4Copy CSS code

Examples

Rounded Corners

Input

All corners equal

Output

border-radius: 8px;

Pill Shape

Input

Fully rounded

Output

border-radius: 9999px;

Top Rounded

Input

Only top corners

Output

border-radius: 16px 16px 0 0;

Frequently Asked Questions

Related Tools

View all

Box Shadow Generator

Advanced CSS box-shadow generator with 25+ presets (Material Design, Tailwind, Neumorphism, Glow effects), multiple layers, color picker with opacity, customizable preview, and 4 output formats (CSS, Tailwind, SCSS, React).

CSS Gradient Generator

Create CSS gradients with multiple color stops. Support for linear, radial, and conic gradients with live preview and code export.