CSS Border Property का प्रयोग कैसे करें- हिन्दी मे पूरी जानकारी

किसी भी element को css में style देने के लिए अलग-अलग property होती है । आज हम इस आर्टिकल में css border property के बारें में बात करेंगे।
CSS Border Property में आप किसी element की border को specify करते है। इसमें element की border का style , width और color को set किया जाता है। आप HTML के लगभग सभी Elements के लिए Border Set कर सकते हैं। सीएसएस में आप Border की Look and Feel को अपनी पंसद के अनुसार Customize कर सकते हैं.

All CSS Border Property and Uses

CSS में Border की अलग-अलग Style के लिए अलग-अलग Properties का प्रयोग किया जाता है। जो इस प्रकार हैं:-

1. border-style
2. border-width
3. border-color
4. border-sides
5. border-radius
6. border

Must Read These Before this:-

Learn CSS In Hindi-CSS सीखें हिन्दी में

What is CSS in Hindi-CSS क्या है और इसके क्या फायदे हैं?

CSS Selector क्या है और इसका use कैसे किया जाता है?

3 ways to insert CSS-किसी webpage में CSS कैसे Add करें

1. border-style:-

Border की स्टाइल property बताती है कि border को किस प्रकार दिखाना है। css में style को बताने के लिए निम्नलिखित वैल्यू दी जा सकती है –
dotted – इस Value से border को dot ( . ) में set किया जाता है।
dashed –इस Value से border को dashed ( — ) में set किया जाता है।
solid – इस Value से border को solid( normal line ) में set किया जाता है।.
double –इसमें border की एक जैसी 2 lines define की जाती है।
groove –border को 3D groove स्टाइल मे दिखने के लिए इसका use होता है।
ridge – इसमें border को 3D ridge में दिखाया जाता है
inset – इसमें border को 3D इन्सेट मे दिखाया जाता है।
outset – इसमें border को 3D outset में दिखाया जाता है।
none – इसमें कोई border नहीं दी जाती।
hidden – border को hide रखने के लिए इसका use होता है।

CSS में border-style property की एक से चार वैल्यू ( top border, right border, bottom border, और left border ) होती है।
CSS Syntax

2. border-width

किसी भी element border की width को set करने के लिए border-width property का प्रयोग किया जाता है। Border की width को declare करने के लिए वैल्यू इस प्रकार है-
2. 1 Predefine Value:- इसमें पहले से define की गई 3 values में से एक वैल्यू दी जाती है जैसे-thin, medium, और thick ।
2. 2 lenth:- इसमें बॉर्डर को px , in, cm, em आदि मे declare किया जाता है।
CSS Syntax

3. border-color:-

किसी element की border के color को specify करने के लिए css border-color property का प्रयोग किया जाता है। Border को declare करने के लिए आप ये values दे सकते हो।
invert :-कलर को invert declare करने के लिए। ये by default ब्लैक होता है।
Color Name :-इसमें कलर का नाम लिखा जाता है जैसे-red , green।
Hexa:- इसमें कलर को Hexadecimal color देने के लिए जैसे-#0000ff।
RGB:- कलर को rgb वैल्यू देकर जैसे-rgp(255, 0, 0 )
RGBA:- इसमें कलर को rgba वैल्यू दी जति जी जैसे- rgba(255, 0, 0, 1 )
HSL:-कलर को hsl वैल्यू देकर जैसे- hsl(120, 100%, 50%)
HSLA:- आप hsla वैल्यू भी define का सकते हो जैसे- hsla(120, 100%, 50%, 1 )

CSS Syntax

4. border-sides

CSS में आप element की हर साइड की border के लिए अलग-अलग style ,width और color को सेट कर सकते हो। सीएसएस में इसके लिए अलग-अलग properties दी गई है:-

border-top
border-right
border-bottom
border-left
आप इनको अलग-अलग define कर सकते हो और एक साथ भी define कर सकते हो।
अब समझने के लिए कुछ उदाहरण देखते हैं।
Example :-

इसमें चारों properties इस प्रकार काम करेगी-
top border– solid में
right border– dashed में
bottom border– dotted में
left border–  double में
इसी प्रकार आप border-color और border-width को भी चारों वैल्यू एक साथ दे सकते हो।
जैसे:-

आप इन चारों properties को अलग-अलग भी define कर सकते हो या इनमें से किसी एक का प्रयोग कर सकते हो। मान लीजिए आप किसी एचटीएमएल element में border-bottom को डिफाइन करते हो तो सिर्फ bottom border ही दिखाई देगी।

5. border-radius

किसी element की border को round में दिखाने के लिए border-radius का प्रयोग किया जाता है। यहाँ एक बात को ध्यान में रखना होगा कि border-radius का प्रयोग आप तभी कर सकते हो जब आपने border property को पहले से define किया हो। आपको पहले border declare करनी पड़ेगी।

6. CSS border shorthand

यह एक shorthand property है जिसका प्रयोग border-width, border-style और border-width properties को एक साथ declare करने के लिए किया जाता है।
CSS Syntax