📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials CSS Mastery Borders

Borders

4 min read
border: 2px solid #ccc sets all sides at once. border-radius: 8px rounds corners and 50% makes a circle. Remove one side with border-top: none. outline does not take space — use it for focus indicators.

Borders and Border Radius

div {
    border: 2px solid #d1d5db;
    border-top: 4px solid blue;  /* single side */
    border-radius: 8px;          /* rounded corners */
    border-radius: 50%;          /* circle */
    border-radius: 16px 4px;     /* top-left/right, bottom-right/left */

    /* Dashed border */
    border: 2px dashed #d1d5db;

    /* Remove bottom border */
    border-bottom: none;
}

/* Outline (doesn't affect layout) */
button:focus { outline: 2px solid blue; outline-offset: 2px; }