Web Development Journey👩💻👨💻
🎨 Border Radius & Style – Beyond Boring Boxes
Borders don’t have to be plain black lines. You can control their color, style, and even make them rounded – unlocking endless creative possibilities ✨.
---
🖌️ Border Styles – Choose Your Flavor
Value Effect Best Used For
solid A single, continuous line Standard borders – clean and professional
dashed A line of dashes Lightweight separation, creative accents
dotted A line of dots Subtle dividers, playful elements
double Two parallel lines Strong emphasis, classic frames
none No border Removing default borders (e.g., on inputs)
border-style: solid; /* or dashed, dotted, double, none */
border-color: #1e293b;
border-width: 2px;
---
🎯 Border Radius – The Magic of Rounded Corners
The border-radius property lets you soften corners – from slight curves to perfect circles.
Value Effect Use Case
10px Slightly rounded corners Cards, buttons – modern, friendly UI
50% Perfect circle (if width = height) Avatars, icons, badges
9999px Full pill shape Tags, pills, call‑to‑action buttons
---
💻 Code Example – Circles & Pills
<div class="circle"></div>
<div class="pill">Pill Shape</div>
<style>
.circle {
width: 100px;
height: 100px;
background: #f0f0f0;
border-radius: 50%; /* ⬅️ Perfect circle */
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-bottom: 10px;
}
.pill {
padding: 10px 30px;
background: #6366f1;
color: white;
border-radius: 50px; /* ⬅️ Fully rounded ends */
display: inline-block;
}
</style>
🔍 Visual Result:
· .circle → perfect circle (great for profile pictures or icons)
· .pill → capsule shape (perfect for buttons, tags, or labels)
---
🧠 Advanced Tip – Individual Corner Control
You can target each corner separately for custom shapes:
.box {
border-radius: 10px 20px 30px 40px;
/* Top-left → Top-right → Bottom-right → Bottom-left */
}
Or use individual properties:
.box {
border-top-
142 ·