Borders in CSS ka use elements ke around line ya outline banane ke liye hota hai. Isse content clear dikhta hai aur layout structured lagta hai.
Border Style
Borders in CSS me border-style property se border ka type decide hota hai.
Common values:
- dotted → dots wali border
- dashed → dashed line
- solid → simple line
- double → double line
- groove → 3D grooved effect
- ridge → 3D ridged effect
- inset → 3D inside effect
- outset → 3D outside effect
- none → no border
- hidden → hidden border
Example:
Different sides ke liye multiple values use kar sakte ho:
Important Note: Jab tak border-style set nahi hota, baaki border properties ka koi effect nahi hota.
Border Width
border-width se border ki thickness set hoti hai.
Example:
Predefined values:
- thin
- medium
- thick
Different sides ke liye:
Border Color
border-color se border ka color set hota hai.
Color formats:
- color name
- HEX (
#ff0000) - RGB (
rgb(255,0,0)) - HSL (
hsl(0,100%,50%)) - transparent
Example:
Different sides ke liye:
Border Sides
Borders in CSS me har side ka border alag set kar sakte ho.
Properties:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
Example:
Side-wise shorthand:
Value Rules
Jab multiple values dete ho, order hota hai:
- 4 values → top, right, bottom, left
- 3 values → top, (right & left), bottom
- 2 values → (top & bottom), (right & left)
- 1 value → sab sides same
Example:
Shorthand Border Property
Multiple properties ko ek line me likhne ke liye shorthand use hota hai.
Includes:
- border-width
- border-style (required)
- border-color
Example:
Specific Side Borders
Sirf ek side ke liye bhi border set kar sakte ho.
Example:
Rounded Borders
border-radius se borders ko round banaya jata hai.
Example:
Zyada value → zyada rounded corners
Borders in CSS design ko clear aur structured banate hain. Tum style, width, color, sides aur radius ko combine karke different border designs create kar sakte ho.
