Border Radius Generator
CSS border-radius creates rounded corners on HTML elements. Syntax: border-radius: value applies same radius to all 4 corners. Individual corners: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Shorthand order: top-left, top-right, bottom-right, bottom-left. Values: pixels (10px), percentages (50% creates circles), or em/rem units. For elliptical corners, use two values separated by slash: border-radius: 50px / 25px. Common patterns: 8px for subtle rounding, 50% for circles, 20px for cards. CSS: .box { border-radius: 12px; } creates rounded rectangles. Supported in all modern browsers (IE9+).
Generate CSS border-radius code with live preview. Create rounded corners, pills, blobs, and custom shapes for your web designs. Interactive visual editor with individual corner control, presets, and instant CSS code export. Perfect for web developers and designers.
Corners
Preview Settings
Presets
CSS Code
border-radius: 16px;
How to Use
- Enter your value in the input field
- Click the Calculate/Convert button
- Copy the result to your clipboard
Frequently Asked Questions
- What is CSS border-radius and how does it work?
- CSS border-radius creates rounded corners on HTML elements. It defines the radius of the corner curves. A value of 10px creates a 10-pixel radius curve. You can set all four corners at once (border-radius: 10px) or individually (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius). Values can be in px, %, em, or other CSS units.
- How do I create a perfect circle with border-radius?
- To create a perfect circle, set border-radius to 50% on a square element. For example, an element with width: 100px and height: 100px and border-radius: 50% will be a perfect circle. The percentage is relative to the element dimensions. For non-square elements, 50% creates an ellipse. Use border-radius: 9999px for a "pill" shape on rectangular buttons.
- What is the border-radius shorthand syntax?
- Border-radius shorthand follows this order: top-left, top-right, bottom-right, bottom-left (clockwise from top-left). With one value (border-radius: 10px), all corners are 10px. Two values (10px 20px) set top-left/bottom-right to 10px and top-right/bottom-left to 20px. Three values (10px 20px 30px) set top-left, top-right/bottom-left, bottom-right. Four values set each corner individually.
- Can I create asymmetric or organic shapes with border-radius?
- Yes! Each corner can have different horizontal and vertical radii using slash notation. For example, border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates an organic blob shape. The values before the slash control horizontal radii, and values after control vertical radii. This creates asymmetric, abstract, or organic-looking shapes popular in modern UI design.
- What are common border-radius values for UI design?
- Common values: 0px (sharp corners, default), 4-8px (subtle rounding for cards and buttons), 12-16px (moderate rounding for panels and modals), 20-24px (prominent rounding for iOS-style interfaces), 50% (circles and pills), 9999px (pill buttons). Material Design uses 4px, iOS often uses 10-20px, and modern web design trends toward 8-12px for consistency.
- Does border-radius work with borders and backgrounds?
- Yes, border-radius affects the entire element box including borders, backgrounds, and box-shadows. The border follows the curve, background images clip to the rounded shape, and box-shadows extend from the curved corners. For images, use border-radius directly on the <img> tag or wrap in a container with overflow: hidden to clip images to rounded shapes.
- What is browser support for CSS border-radius?
- Border-radius is supported in all modern browsers without vendor prefixes: Chrome 4+, Firefox 4+, Safari 5+, Edge (all versions), iOS Safari 3.2+, and Android Browser 2.1+. Very old browsers (IE 8 and below) do not support it. For maximum compatibility with legacy browsers, add vendor prefixes: -webkit-border-radius and -moz-border-radius, though these are rarely needed today.
- Can I animate border-radius?
- Yes, border-radius is fully animatable with CSS transitions and animations. Common use cases include morphing a square to a circle on hover, creating loading spinners, or organic shape animations. Example: transition: border-radius 0.3s ease; will smoothly animate radius changes. Use JavaScript for complex animations or toggle classes to trigger CSS transitions.