CSS Border Tutorial in Hindi – Part 5

आज इस आर्टिकल में हम आपको CSS Border Tutorial in Hindi – Part 5 के बारे में बता रहे है.

CSS Border property का इस्तेमाल तब किया जाता है जब किसी element पर हमें कोई border apply करना हो. Border element को एक बॉक्स में परिवर्तित कर देता है.

Border Style

border में अलग अलग style अप्लाई कर सकते है. इसके लिए कुछ value है जिनके बारे में हम आपको नीचे बता रहे है.

• dotted – Dotted border को define करने के लिए
• dashed – Dashed border को define करने के लिए
• solid –  Solid border को define करने के लिए
• double – Double border को define करने के लिए
• groove – 3D groove border को define करने के लिए
• ridge – 3D ridge border को define करने के लिए
• inset – 3D inset border को define करने के लिए
• outset – 3D outset border को define करने के लिए
• none – कोई border ना define करने के लिए
• hidden – hidden border define करने के लिए

Example

h1.dotted {
    border-style: dotted;
}

हम किसी भी border के चारो हिस्सों को भी अलग अलग style दे सकते है. इसके लिए हम border-top-style, border-bottom-style, border-left-style, border-right-style का इस्तेमाल किया जा सकता है.

Border Width

border-widthका इस्तेमाल border की width सेट करने के लिए किया जाता है. इसकी value px, cm, em इत्यादि में रखी जाती है. इसका उदाहरण हम आपको नीचे बता रहे है.

Example 1

h1.one {
border-style: solid;
border-width: 5px;
}

Example 2

h1.two {
border-style: solid;
border-width: medium;
}

Example 3

h1.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

Border Color

border-color का इस्तेमाल border के color को define करने के लिए किया जाता है. इसकी value हम color के नाम, RGB और Hex code में देते है.

Example 1

h1.one {
 border-style: solid;
 border-color: red;
}

Example 2

h1.two {
 border-style: solid;
 border-color: green;
}

Example 3

h1.three {
 border-style: solid;
 border-color: red green blue yellow;
}

इस प्रकार हम किसी भी border का अलग अलग या एक जैसा color define कर सकते है. हमने example 3 में अलग अलग color को सेट किया है.

वैसे इन सब के अलावा ज्यादातर border का शॉर्टहैंड ही इस्तेमाल किया जाता है जिसमे color, width और style तीनो चीजों को एक साथ दिया जा सकता है.

Example

p {
    border: 5px solid red;
}

Rounded Border

कई बार हमें border के कोनो को round करने की जरूरत होती है जिससे आपकी web एप्लीकेशन की लुक को अच्छा किया जा सके. इसके लिए हमें border-radius का इस्तेमाल करना पड़ेगा.

p {
    border: 2px solid red;
    border-radius: 5px;
}

CSS Margin Tutorial in Hindi – Part 6>>>>>>>>