Advertisement

Border Radius Generator

Create CSS border-radius values visually with individual corner controls and live preview.

Preview

#ea580c

Corner Controls

16px
16px
16px
16px

Presets:

Generated CSS

Shorthand
border-radius: 16px;
Individual Properties
border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px;
Advertisement

Related Tools

Box Shadow

Create CSS box shadows visually. Adjust blur, spread, offset, and color.

FlexboxNEW

Build CSS flexbox layouts visually with live preview of justify, align, wrap, and gap properties.

CSS Grid

Visual CSS Grid layout builder. Set rows, columns, and gaps with live preview.

Clip PathNEW

Create CSS clip-path shapes visually with polygon, circle, ellipse, and inset presets.

Advertisement

Frequently Asked Questions

What is CSS border-radius?
The CSS border-radius property rounds the corners of an element. You can set a uniform radius for all four corners, or specify individual values for each corner (top-left, top-right, bottom-right, bottom-left). Values can be specified in pixels (px), percentages (%), or other CSS units.
How do I make a circle with border-radius?
To create a perfect circle, set the element to have equal width and height (making it a square), then apply border-radius: 50%. The 50% value rounds each corner by half the element dimensions, creating a smooth circle. For an ellipse, apply border-radius: 50% to a rectangular element.
What is the shorthand syntax?
The border-radius shorthand accepts 1 to 4 values: one value applies to all corners; two values set top-left/bottom-right and top-right/bottom-left; three values set top-left, top-right/bottom-left, and bottom-right; four values set each corner individually clockwise from top-left.
Can I use different horizontal and vertical radii?
Yes. The full border-radius syntax supports separate horizontal and vertical radii using a slash: border-radius: 10px 20px / 30px 40px. The values before the slash are horizontal radii and the values after are vertical radii. This creates elliptical corners rather than circular ones.
What browsers support border-radius?
The border-radius property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It has been universally supported since approximately 2012, so vendor prefixes (-webkit-, -moz-) are no longer necessary for any current browser version.
Can border-radius be animated?
Yes. The border-radius property is animatable with CSS transitions and animations. You can smoothly transition between different border-radius values for interactive effects. This works with both shorthand and individual corner properties.
What is the difference between px and % values?
Pixel values create fixed-size rounded corners regardless of the element size. Percentage values create rounded corners relative to the element dimensions, so the rounding scales with the element. Using 50% always creates the maximum possible rounding (circle or ellipse).

How to Use the Border Radius Generator

CSS border-radius is one of the most commonly used properties in web design, adding polished, rounded corners to buttons, cards, images, and other elements. Our visual border radius generator makes it easy to experiment with different corner values and generate the exact CSS code you need.

Step 1: Adjust the sliders. Use the corner sliders to set the border radius for each corner individually: top-left, top-right, bottom-right, and bottom-left. You can also link all corners together for uniform rounding.

Step 2: Preview the result. The preview box updates in real time as you adjust the sliders, showing you exactly how the border radius will look on an element. The preview uses a colored box so you can clearly see the rounded corners.

Step 3: Copy the CSS. The generated CSS code is displayed below the preview. Click the copy button to copy the CSS to your clipboard, ready to paste into your stylesheet.

Understanding CSS Border Radius

The border-radius property was introduced in CSS3 and has become one of the most widely used CSS properties. It allows developers to create rounded corners without images or complex workarounds that were necessary in earlier versions of CSS. The property works on any block-level or inline-block element and affects the element background, border, and shadow clipping.

Each corner of an element can have its own radius value, allowing for creative asymmetric designs. The four individual properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. The shorthand border-radius property accepts up to four values in clockwise order starting from the top-left corner.

When a border-radius value exceeds half the element dimension, the browser automatically clips the radius to prevent overlapping curves. This is why setting border-radius to 50% on a square creates a perfect circle, and setting it to a very large pixel value (like 9999px) on a rectangular element creates a pill or capsule shape.

Border Radius Design Patterns

Cards and containers. Most design systems use small to medium border-radius values (4px to 16px) for cards and content containers. These subtle rounded corners create a softer, more approachable feel compared to sharp 90-degree corners. Common values in popular design systems include 4px (minimal), 8px (standard), 12px (medium), and 16px (large).

Buttons. Button border-radius varies significantly across design systems. Sharp corners (0-2px) create a more serious, corporate feel. Medium rounding (4-8px) is the most common choice. Pill-shaped buttons use large values (9999px) for a modern, friendly appearance. The right choice depends on your overall design language.

Images and avatars. Profile images and avatars commonly use border-radius: 50% to create circular cropping. Image cards typically use moderate rounding (8-16px) to match the overall card design. Some designs use different rounding for different image contexts within the same application.

Creative shapes. By using different values for each corner, you can create organic blob shapes, leaf shapes, and other decorative elements without SVG or images. Combining border-radius with CSS transforms and gradients opens up possibilities for creative visual effects and decorative backgrounds.

Why Use Our Border Radius Generator?

Visual editing. See your border radius changes in real time with a live preview. Visual editing is faster and more intuitive than guessing pixel values and refreshing your browser to see the result. The preview shows exactly how the CSS will render.

Individual corner control. Set each corner independently for asymmetric designs, or link all corners for uniform rounding. The tool generates both shorthand and individual property syntax, giving you the CSS format that best fits your needs.

Copy-ready CSS. The generated CSS code is ready to paste directly into your stylesheet. No manual conversion or formatting needed. The tool generates clean, optimized CSS using the shorthand property when possible.

Advertisement