CSS Border-Radius Properties

CSS Border Radius Property

Introduction to Border Radius

The CSS border-radius property allows you to round the corners of an element, creating smooth, curved edges. Each corner's curvature is defined by one or two radii: horizontal and/or vertical. If a single value is provided, it applies uniformly to all four corners.

You can specify one, two, three, or four values to control the radius of each corner in the order: top-left, top-right, bottom-right, and bottom-left. Using a slash (/) enables separate horizontal and vertical radii for elliptical shapes.

Syntax Overview:

• border-radius: R;: Applies radius R to all four corners.
• border-radius: R1 R2;: Top-left & bottom-right use R1, top-right & bottom-left use R2.
• border-radius: R1 R2 R3;: Top-left R1, top-right & bottom-left R2, bottom-right R3.
• border-radius: R1 R2 R3 R4;: Top-left R1, top-right R2, bottom-right R3, bottom-left R4.
• border-radius: H1 V1 / H2 V2;: Defines horizontal (H) and vertical (V) radii for elliptical curves.

Basic Syntax Examples

/* Single value for all corners */
border-radius: 10px;

/* Two values: top-left/bottom-right | top-right/bottom-left */
border-radius: 10px 20px;

/* Three values: top-left | top-right/bottom-left | bottom-right */
border-radius: 10px 20px 30px;

/* Four values: top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 20px 30px 40px;

/* Horizontal and vertical radii with slash */
border-radius: 10px 20px / 5px 15px; /* TL & BR: 10px/5px, TR & BL: 20px/15px */

Supported Units for border-radius:

• Pixels (px): Fixed values, e.g., 10px.
• Percentages (%): Relative to element’s width/height, e.g., 50% for a circle on a square.
• Other Units: em, rem, vw, vh for responsive designs.

When two values are set for a corner (e.g., border-top-left-radius: 20px 50px;), the first is the horizontal radius, and the second is the vertical radius.

Practical Examples

Uniform Border Radius

A single border-radius value applies consistent rounding to all corners, ideal for simple, symmetric designs.

.rounded-uniform {
    border-radius: 20px;
    background: #CCC;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

20px Radius

Different Radii for Each Corner

Specify unique radii for each corner in clockwise order: top-left, top-right, bottom-right, bottom-left.

.rounded-different {
    border-radius: 10px 30px 15px 40px;
    background: #CCC;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

10px 30px 15px 40px

Elliptical Corners

Using the slash (/) syntax, define separate horizontal and vertical radii for elliptical shapes.

.rounded-ellipse {
    border-radius: 50% / 20%;
    width: 150px;
    height: 80px;
    background: #CCC;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

Elliptical Shape

Rounded Top Corners Only

Set 0 for bottom corners to round only the top-left and top-right, useful for tabs or cards.

.rounded-top {
    border-radius: 20px 20px 0 0;
    background: #CCC;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

Top Rounded Only

Perfect Circle

On a square element, a border-radius of 50% creates a perfect circle.

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

Circle

Pill Shape

A large border-radius (e.g., 9999px) on a rectangle creates a pill shape with fully rounded ends.

.pill {
    border-radius: 9999px;
    padding: 10px 20px;
    background: #333;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

Pill Shape

Complex Asymmetrical Shape

Use four horizontal and vertical radii with the slash syntax for unique, organic shapes.

.rounded-complex {
    border-radius: 40px 10px 30px 60px / 20px 50px 40px 10px;
    background: #CCC;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

Complex Shape

Back to Top