Border Radius Generator

Uniform border radius

Radius: 8px

Presets

CSS Code

border-radius: 8px;

Full syntax:

.element {
  border-radius: 8px;
}

Individual properties:

border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;

Live Preview

8px

Example Uses

Button

Card

Card Title

A card with custom border radius.

Image Container

Avatar

Common Values

None 0

Slight 2-4px

Rounded 8px

Large 12-16px

XL 20-24px

Pill / Circle 50% or 999px

About CSS Border Radius

CSS border-radius creates rounded corners on HTML elements. It's one of the most commonly used CSS properties for modern, polished designs. Control all four corners individually or use a uniform radius for consistency.

Syntax Formats:

/* One value - all corners */

border-radius: 8px;

/* Four values - top-left, top-right, bottom-right, bottom-left */

border-radius: 10px 20px 30px 40px;

/* Percentage values for responsive shapes */

border-radius: 50%; /* Creates perfect circle on square */

Common Use Cases:

Buttons and call-to-action elements
Cards and content containers
Images and avatars (circles and rounded squares)
Form inputs and text fields
Navigation pills and tabs
Badges and labels

Design Tips:

Use consistent border radius values throughout your design system
Smaller elements (buttons, badges) typically use smaller radius (4-8px)
Larger containers (cards, modals) can use larger radius (12-24px)
50% creates perfect circles (on square elements)
Organic/blob shapes use different values per corner
Consider mobile touch targets when rounding buttons

Browser Support:

Border-radius is supported in all modern browsers. For older browsers (IE8 and below), the corners will simply remain square - a harmless graceful degradation.