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; }