CSS Rounded Corners

Create smooth, modern rounded corners with border-radius

🔄 What are Rounded Corners?

CSS rounded corners allow you to create smooth, curved edges on elements using the border-radius property. This creates modern, polished designs. 


/* Basic rounded corners */
.rounded-box {
    border-radius: 10px;
    background-color: #3498db;
    padding: 20px;
    color: white;
}

Output:

This box has rounded corners!

Border Radius Basics

📐

Single Value

Same radius for all corners 

border-radius: 15px;
🎯

Individual Corners

Different radius for each corner 

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

Perfect Circle

50% creates perfect circles 

border-radius: 50%;
🏷️

Pill Shape

Large radius for pill buttons 

border-radius: 25px;

🔹 Basic Rounded Corners

The border-radius property creates rounded corners using a single value applied uniformly to all four corners of an element. For example, border-radius: 12px; softens edges for buttons, cards, or images, enhancing modern UI aesthetics. This simple technique improves visual hierarchy, reduces sharpness, and aligns with contemporary design trends. It’s widely supported, performant, and works seamlessly with backgrounds, borders, and shadows to create polished, inviting interface components.

/* HTML */
<div class="card">Basic rounded card</div>

/* CSS */
.card {
    background-color: #e74c3c;
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
}

Output:

Basic rounded card

🔹 Individual Corner Control

CSS allows precise control over each corner individually using the border-radius property with up to eight values (horizontal/vertical radii). For example, border-radius: 10px 20px 30px 40px; creates asymmetric rounded edges for unique shapes, speech bubbles, or custom containers. This granular control supports creative layouts, branded design elements, and adaptive interfaces, enabling designers to break from uniform geometry while maintaining clean, scalable code without extra HTML markup or image assets.

/* Different ways to set individual corners */

/* Method 1: Shorthand (top-left, top-right, bottom-right, bottom-left) */
.custom-corners {
    border-radius: 0 20px 40px 0;
}

/* Method 2: Individual properties */
.individual-corners {
    border-top-left-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0;
}

/* Method 3: Two values (top-left & bottom-right, top-right & bottom-left) */
.diagonal-corners {
    border-radius: 20px 0;
}

Output:

Custom corners
Diagonal corners

🔹 Perfect Circles and Pills

Create perfect circles by setting border-radius: 50%; on a square element, and pill-shaped elements by using a large fixed value like border-radius: 999px; on rectangles. These shapes are ideal for avatars, buttons, tags, and toggle switches. The technique is fully responsive, works with any background or border, and enhances visual consistency across components. Using relative units ensures scalability, while CSS variables can dynamically adjust radii for theme variations or interactive states.

/* Perfect circle */
.circle {
    width: 100px;
    height: 100px;
    background-color: #2ecc71;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Pill button */
.pill-button {
    background-color: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
}

.pill-button:hover {
    background-color: #2980b9;
}

Output:

Circle

🔹 Modern Card Designs

Modern card layouts combine border-radius with shadows, padding, and subtle borders to create distinct, contained content modules. Rounded corners (typically 8–16px) soften edges, improve visual separation, and direct focus toward card content. Paired with box-shadow for depth and flexible interiors using Flexbox or Grid, cards become reusable components for dashboards, portfolios, and product listings. This approach enhances scannability, touch interaction, and responsive behavior across devices.

/* Modern card with subtle shadow */
.modern-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 16px;
    max-width: 300px;
}

.card-header {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #2c3e50;
}

.card-content {
    color: #7f8c8d;
    line-height: 1.6;
}

/* Image with rounded corners */
.rounded-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

Output:

Modern Card
This is a modern card design with rounded corners and subtle shadow effects.

🔹 Advanced Techniques

Advanced rounded corner techniques include combining border-radius with gradients, overlays, clipping paths, and animations for immersive effects. Use border-radius with overflow: hidden to clip images, or with pseudo-elements for layered shapes. Animating radius values via CSS transitions can create morphing UI states. These methods allow for complex visual storytelling, interactive components, and polished aesthetics while keeping performance high and code maintainable within modern design systems.

/* Rounded corners with gradient background */
.gradient-rounded {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 20px;
    color: white;
    text-align: center;
}

/* Rounded corners with border */
.bordered-rounded {
    border: 3px solid #e74c3c;
    border-radius: 15px;
    padding: 16px;
    background-color: #fff;
}

/* Asymmetric rounded corners */
.asymmetric {
    border-radius: 30px 5px 30px 5px;
    background-color: #f39c12;
    padding: 20px;
    color: white;
}

Output:

Gradient Rounded
Bordered Rounded
Asymmetric

🧠 Test Your Knowledge

What border-radius value creates a perfect circle?