Border Radius

The border-radius property rounds the corners of an element's border box. It can create anything from subtle rounded cards to perfect circles and pill shapes.

Shorthand Values

Like margin and padding, the shorthand follows the top-right-bottom-left order. One value sets all four corners equally. Two values set top-left/bottom-right and top-right/bottom-left.

Elliptical Corners

A slash (/) separates horizontal and vertical radii, creating elliptical corners: border-radius: 50% / 25%.

Individual Corner Longhands

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Example

/* Subtle card rounding */
.card {
    border-radius: 8px;
}

/* Pill / badge shape */
.badge {
    border-radius: 999px; /* large enough to always be pill */
    padding: 0.25em 0.75em;
}

/* Perfect circle */
.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* Chat bubble — one sharp corner */
.bubble {
    border-radius: 16px 16px 16px 0;
    background: #e8f0fe;
    padding: 0.75rem 1rem;
}

/* Organic blob shape with elliptical radii */
.blob {
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    width: 200px; height: 200px;
}

CSS

Full Editor

Pro Tip

Use border-radius: 50% for circular elements only when the element is a perfect square — if width and height differ, 50% creates an ellipse. For a guaranteed circle, also add aspect-ratio: 1.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned