Python Borders & Border Radius (Rounded Corners & Circles)
Borders frame elements with clean outlines. With border-radius, you can soften harsh 90-degree corners into smooth rounded rectangles, sleek pill tags, or perfect circular profile avatars.
"border is the picture frame around a painting. border-radius is using sandpaper on the sharp 90-degree wood corners to make them smooth and modern."
Deep Dive: How It Works
Border Shorthand: border: 1px solid #383a40; (width style color).
Border Styles: solid (clean line), dashed, dotted, or none.
Individual Sides: border-bottom: 1px solid rgba(255,255,255,0.1); creates delicate dividers without boxy frames.
border-radius: 8px; -> Modern subtle card curve.
border-radius: 9999px; -> Perfect pill badge / capsule button.
border-radius: 50%; -> Turns any square box into a flawless circle (perfect for avatars!).
Syntax Blueprint
/* Subtle Modern Card */
.card {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
/* Circular Avatar */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}Use small radii for cards and 50% on square elements for perfect circles.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Using border-radius: 50% on a non-square elementWhy it happens: If width is 200px and height is 100px, 50% creates an egg oval rather than a circle.
How to fix: Ensure width and height are strictly identical (e.g. 48px by 48px) before applying 50%.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Make a circular avatar with a border
- Write a rule for .profile-pic setting width: 40px; height: 40px; border-radius: 50%; and border: 1px solid #ffffff;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.