CSS Border Radius Generator | Ultimate Design Tools

What Is a Border Radius Generator?

The CSS border-radius property rounds the corners of any element. While simple rounded corners are easy to write by hand, complex organic shapes with asymmetric elliptical corners require 8 separate values — that's where this tool becomes essential. Drag the corner handles to create any shape from simple rounded rectangles to organic blobs.

Understanding the Syntax

A single value like border-radius: 12px rounds all four corners equally. Four values set each corner individually: top-left, top-right, bottom-right, bottom-left. The advanced slash syntax (border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%) creates elliptical corners where horizontal and vertical radii differ — enabling truly organic shapes.

How to Use This Border Radius Lab

Set each corner independently — Adjust the border-radius for top-left, top-right, bottom-right, and bottom-left corners individually.
Try the 8-value syntax — Toggle advanced mode to control horizontal and vertical radii separately using the border-radius: TL TR BR BL / TL TR BR BL syntax.
Use presets — Start from common shapes — pill, circle, leaf, blob — and customize from there.
Preview on different elements — See your border-radius applied to buttons, cards, images, and avatars.
Copy the CSS — Click Copy for the complete border-radius declaration.

Tips and Best Practices

→ Use 50% for perfect circles. Setting border-radius: 50% on a square element creates a perfect circle. On a rectangle, it creates an ellipse.
→ Use large fixed values for pill shapes. A border-radius of 9999px (or a very large value) on a rectangular element creates the pill/capsule shape common in tags and buttons.
→ The 8-value syntax creates organic shapes. Using different horizontal and vertical radii per corner creates leaf shapes, blob-like forms, and other organic CSS shapes without SVG.
→ Be consistent across your design. Pick 2–3 border-radius values for your design system (e.g., 4px for inputs, 8px for cards, 9999px for pills) and use them consistently.

Frequently Asked Questions

What is CSS border-radius?

The border-radius property rounds the corners of an element. You can set a single value for all corners, or four individual values. Each value can use px, %, or em units. The slash syntax allows elliptical corners with different horizontal and vertical radii.

How do I make a circle with CSS?

Set border-radius: 50% on a square element (equal width and height). The 50% value rounds each corner by half the element's dimensions, creating a perfect circle.

Can I make irregular rounded shapes?

Yes. Each corner accepts two values separated by a slash — one for horizontal and one for vertical radius. This creates elliptical corners, enabling organic shapes. This tool's advanced mode lets you control all 8 values visually.

What is CSS border-radius?+

Border-radius rounds the corners of an element's outer border edge. It accepts 1–4 values for each corner. A single value applies to all corners. Percentage values create proportional rounding — 50% on a square creates a circle. It's one of the most commonly used CSS properties.

What is the 8-value border-radius syntax?+

The full syntax is border-radius: TL TR BR BL / TL TR BR BL, where the first four values set horizontal radii and the last four set vertical radii. This creates elliptical corners — enabling organic shapes like leaves, eggs, and blobs using pure CSS.

Does border-radius affect the content area?+

Border-radius only rounds the visual border and background — it doesn't clip child content by default. To clip overflow content to the rounded shape, add overflow: hidden to the element. This is commonly needed when rounding images or containers with backgrounds.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools