Backgrounds & Borders
Borders & Shadows
border-radius, box-shadow
💡 border-radius corners ko round karta hai — jaise ek sharp-corner box ko soft-corner box mein badalna. box-shadow depth create karta hai — jaise element floating hai page se thoda upar, real-world shadow jaisa.
border (shorthand: width style color) element ke around ek line. border-radius corners round karta hai — 50% se perfect circle (square element par) ban jaata hai. box-shadow (horizontal-offset vertical-offset blur-radius spread-radius color) depth/elevation effect deta hai.
.card {
border: 1px solid #ddd;
border-radius: 8px; /* soft rounded corners */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* subtle elevation */
}
.avatar {
border-radius: 50%; /* perfect circle (agar width=height) */
}
.button:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* hover par zyada elevated */
}🔲
border-radius corners ko round karta hai — jaise ek sharp-corner box ko soft-corner box mein badalna. box-shadow depth create karta hai — jaise element floating hai page se thoda upar, real-world shadow jaisa.
1 / 2
⚡ झट से Recap
- border-radius = rounded corners, 50% = circle
- box-shadow = offset-x offset-y blur spread color
- Multiple shadows (comma-separated) = layered depth effects
इस page में (2 subtopics)
border-radius har corner ko individually bhi control kar sakta hai — 4 values (top-left, top-right, bottom-right, bottom-left) se asymmetric shapes bana sakte ho, jaise ek "speech bubble" ya organic blob shapes.
.custom-shape {
border-radius: 20px 5px 20px 5px; /* alternating corners */
}
.speech-bubble {
border-radius: 15px 15px 15px 0; /* ek corner sharp — bubble "tail" jaisa */
}Tip: border-radius mein / (slash) se horizontal aur vertical radius alag bhi specify kar sakte ho — jaise ellipse-jaisi curves banane ke liye: border-radius: 50% / 20%;
box-shadow ka inset keyword shadow ko element ke ANDAR daalta hai (bahar ki jagah) — "pressed in" ya "carved out" effect ke liye, jaise ek input field jo halka sa recessed dikhe.
.pressed-button {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
/* button "dabaya hua" jaisa dikhta hai */
}
input:focus {
box-shadow: inset 0 0 0 2px blue; /* inner border-jaisa effect */
}Tip: inset shadows outline ka ek creative alternative hain — inset 0 0 0 2px color; ek "border" jaisa dikhta hai bina actual layout space consume kiye (border ke ulat, jo box size change kar deta hai).