Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Borders & Border Radius
Borders create visible outlines around elements. Combined with border-radius for rounded corners, they're essential for creating cards, buttons, input fields, avatars, and decorative elements.
Border Properties
- border: 2px solid #333 - Shorthand: width, style, color
- Border styles - solid, dashed, dotted, double, groove, ridge, none
- border-top, border-right, border-bottom, border-left - Style individual sides
- border-radius: 8px - Rounds all corners. The key to modern card designs
- border-radius: 50% - Creates a perfect circle (element must be square)
- border-radius: 20px 0 20px 0 - Different radius per corner (top-left, top-right, bottom-right, bottom-left)
- outline vs border - Outline doesn't affect layout (doesn't add to width). Used for focus states
Border Examples
/* Card with rounded corners */
.card {
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden; /* Clips content to rounded corners */
}
/* Circle avatar */
.avatar {
width: 80px;
height: 80px;
border-radius: 50%; /* Perfect circle */
border: 3px solid #E44D26;
object-fit: cover;
}
/* Input field with focus border */
.input {
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px 14px;
}
.input:focus {
border-color: #667eea;
outline: none;
}
/* Decorative bottom border */
.section-title {
border-bottom: 3px solid #E44D26;
padding-bottom: 8px;
display: inline-block;
}
/* Pill shape */
.badge {
border-radius: 9999px; /* Fully rounded = pill */
padding: 4px 12px;
}Tip
Use border-radius: 12px for modern card designs and border-radius: 9999px for pill-shaped buttons and badges. For circular avatars, use border-radius: 50% with equal width and height. These three radius patterns cover 90% of UI design needs.
Every element follows the box model - content + padding + border + margin
Common Mistake
Using border-radius: 50% on a rectangle creates an ellipse, not a circle. For a perfect circle, the element must have equal width and height. Also, images inside rounded containers need overflow: hidden on the parent to clip to the rounded corners.
Quick Quiz
Key Takeaways
- Borders create visible outlines around elements.
- border: 2px solid #333 - Shorthand: width, style, color
- Border styles - solid, dashed, dotted, double, groove, ridge, none
- border-top, border-right, border-bottom, border-left - Style individual sides