Previous
Written by: rJTutorial Team | Last Updated:

CSS Rounded Corners

Rounded corners have become a staple of modern web design. In CSS, we create these using the border-radius property. Beyond just aesthetics, rounded corners can help draw a user's eye toward the center of an element and make a user interface feel more approachable and less "boxy."

The border-radius property defines the radius of the element's corners. Think of it as placing an imaginary circle (or ellipse) at the corner of your box and cutting the corner to match the curve of that circle.

Developer Tip: You don't actually need a border defined (like border: 1px solid black) for border-radius to work. It will clip the background color or background image of the element regardless of whether a border is visible.

Basic Usage

The border-radius property is a shorthand that can take between one and four values. The behavior changes depending on how many values you provide:

  • One value: Applies the same radius to all four corners (top-left, top-right, bottom-right, and bottom-left).
  • Two values: The first value applies to the top-left and bottom-right corners, while the second value applies to the top-right and bottom-left corners.
  • Three values: The first value is top-left, the second is top-right AND bottom-left, and the third is bottom-right.
  • Four values: Each value applies to a specific corner in a clockwise order: top-left, top-right, bottom-right, then bottom-left.
Best Practice: For most UI elements like cards or buttons, stick to a subtle radius (between 4px and 8px). This provides a modern feel without making the element look like a toy.

Syntax

/* Standard shorthand syntax */
border-radius: [value];

Examples

Single Value

This is the most common use case, ensuring a uniform look across the entire element.

div {
    border-radius: 10px; /* All corners will have a 10px radius */
}

Two Values

Using two values is helpful for creating a diagonal symmetry.

div {
    border-radius: 10px 20px; /* Top-left/bottom-right: 10px; Top-right/bottom-left: 20px */
}

Four Values

When you need total control over every corner, use the four-value syntax. Remember the order: Clockwise starting from Top-Left.

div {    border-radius: 10px 20px 30px 40px; /* TL: 10px, TR: 20px, BR: 30px, BL: 40px */ }

Common Mistake: Forgetting the clockwise order. Developers often mix up the bottom-right and bottom-left corners when writing out all four values.

Advanced Usage

Elliptical Corners

By default, border-radius creates circular arcs. However, you can create elliptical (oval) corners by using a "slash" (/) syntax. This allows you to set a different horizontal radius and vertical radius.

Syntax

border-radius: horizontal-radius / vertical-radius;

Example

This creates a "squashed" look where the curve is wider than it is tall.

div {    border-radius: 50px / 25px; /* 50px horizontal, 25px vertical */ }

  • Individual Corner Properties

Sometimes it is cleaner to target just one corner, especially if you need to override a previous style in a media query or a hover state.

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Example

div {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

Combining Rounded Corners with Other Properties

The real power of border-radius shines when paired with shadows and background colors. This is the foundation of "Material" or "Glassmorphism" design trends.

Watch Out: If you have a child element (like an image) inside a container with rounded corners, the child might "overflow" and cover the rounded corners. To fix this, add overflow: hidden; to the parent container.

Example

div {
    width: 200px;
    height: 100px;
    background-color: #3498db;
    border-radius: 15px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); /* Adds depth to the rounded edges */
}

This creates a smooth, elevated blue card that feels integrated into the UI.

Practical Uses

Here are three ways you will use border-radius in almost every project:

  • Buttons

Modern buttons often use a "pill" shape. You can achieve this by setting a very high border-radius value.

button {
    padding: 10px 25px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 50px; /* Use a large value for a pill-shaped button */
    cursor: pointer;
}
  • Cards

For container-based layouts, rounded corners make the content feel more organized.

.card {
    padding: 20px;
    background-color: white;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
  • Images

Circular avatars are a standard in social media apps. To make any square image perfectly circular, use 50%.

img.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Only works as a circle if the image is square */
    object-fit: cover; /* Prevents the image from stretching */
}

Tips for Using border-radius

  • Consistency: Don't mix 4px corners with 20px corners on the same page unless you have a specific reason. Pick a "design system" value (like 8px) and stick to it.
  • Percentage vs Pixels: 50% creates an oval/circle based on the element's size, while px values stay constant regardless of the element's dimensions.
  • Nested Corners: When nesting one rounded element inside another, the outer element should usually have a slightly larger border-radius than the inner one to keep the gap between them looking uniform.
Developer Tip: You can use border-radius to create interesting organic shapes by providing eight different values (using the slash syntax) for a single element. Tools like "Fancy Border Radius" generators can help you visualize this.

By mastering border-radius, you move beyond basic HTML boxes and start creating professional, polished user interfaces that look great on any screen.

Previous