Rounded Corners

The border-radius property rounds the corners of an element — no images needed!

Basic Usage

/* All corners the same */
.card { border-radius: 8px; }

/* Pill shape */
.pill { border-radius: 100px; }

/* Circle (equal width and height required) */
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

Individual Corners

.box {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* Shorthand: TL TR BR BL */
.box { border-radius: 12px 12px 0 0; }

Elliptical Corners

/* Horizontal / vertical radius */
.fancy { border-radius: 20px / 10px; }

Practical Examples

/* Modern card */
.card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Round avatar */
.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* Rounded button */
.btn {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    border: none;
    background: #3498db;
    color: white;
}