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.
See also: Outlines and borders pair naturally; the CSS Outline Generator fine-tunes the corner geometry of the underlying element.
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.
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.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service