CSS in Hindi – Introduction to CSS Border Properties

  • CSS border properties in Hindi
  • border-width property in Hindi
  • border-style property in Hindi

CSS in Hindi – Borders

HTML मे किसी भी element को border देने के लिए border property का use किया जाता है इसे मै पहले भी बता चूका हु की border property का use कैसे किया जाता है |

लेकिन इस article मे हम कुछ और property के बारे मे जानेंगे जो border के लिए use की जाती है वैसे तो css मे border चार प्रकार के होते है | जिनका list हम निचे दे रहे है |

  • border-width
  • border-style
  • border-radius
  • border-color
  • border property

border-width Property

Css मे border-width property का use border का width define करने के लिए किया जाता है | वैसे तो अपने border का width border property के through ही कम या जादा कर सकते है |

लेकिन border width property भी css के अन्दर आती है तो मै इसे भी आपके साथ शेयर करना जरुरी समझा अब निचे दिये गये code को देखे |

<html>
<head>
<style type="text/css">
#p1 { border: solid; border-width: 10px; }
#p2 { border: solid; border-width: 10px; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

border-style Property

CSS मे border-style का use border का style define करने के लिए किया जाता है यानी हमारे border का type कैसा होगा इसे हम border-width property मे define कर सकते है और values हमेसा predefined होती है जिनका list हम निचे दे रहे है |

  • none – इस value के साथ हमारा border दिखाई नही देता है |
  • solid – इस value से हमारा border solid हो जाता है या single लाइन मे दिखाई देता है |
  • double – इस value के साथ हमारा border double हो जाता है |
  • dashed – इस value के साथ हमारा border dashed की format मे दिखाई देता है |
  • dotted – इस value से हमारा border dotted मे दिखाई देता है |
  • ridge – इस value से हमारा border ridge मे दिखाई देता है |
  • inset – इस value से हमारा border inset हो जाता है |
  • outset – इस value से हमारा border outset हो जाता है
  • groove – इस value से हमारा border groove मे देखाई देता है |

ऊपर दिये गये list मे कुछ advanced border की values भी दिये गये है | अब निचे दिये गये code को देखे | code मे सारे values का example दिया गया है |

<html>
<head>
<style type="text/css">
#p1 { border-style: none; }
#p2 { border: 10px pink; border-style: solid; }
#p3 { border: 10px grey; border-style: dashed; }
#p4 { border: 10px purple; border-style: dotted; }
#p5 { border: 10px brown; border-style: double; }
#p6 { border: 10px brown; border-style: groove; }
#p7 { border: 10px green; border-style: ridge; }
#p8 { border: 10px blue; border-style: inset; }
#p9 { border: 10px yellow; border-style: outset; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p4">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p5">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p6">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p7">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p8">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p9">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

border-color Property

CSS मे border color property का use border का color change करने के लिए किया जाता है वैसे तो border का color border property के through भी किया जा सकता है पर यह property भी css मे आती है तो इसे भी आपको जानना चाहिए अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
#p1 { border-style: none; }
#p2 { border-width: 10px border-color: pink; border-style: solid; }
#p3 { border-width: 10px border-color: grey; border-style: dashed; }
#p4 { border-width: 10px border-color: purple; border-style: dotted; }
#p5 { border-width: 10px border-color: brown; border-style: double; }
#p6 { border-width: 10px border-color: brown; border-style: groove; }
#p7 { border-width: 10px border-color: green; border-style: ridge; }
#p8 { border-width: 10px border-color: blue; border-style: inset; }
#p9 { border-width: 10px border-color: yellow; border-style: outset; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p4">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p5">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p6">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p7">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p8">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p9">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

border-radius

Css मे border-radius property का use border का radius define करने के लिए किया जाता है यानी इस property के through आप अपने border का radius customize कर सकते है यानी अपने border के कोनो को एक circle का shape दे सकते है | अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
#p1 { border-style: none; }
#p2 { border-width: 10px border-color: pink; border-style: solid; border-radius: 5px; }
#p3 { border-width: 10px border-color: grey; border-style: dashed; border-radius: 5px; }
#p4 { border-width: 10px border-color: purple; border-style: dotted; border-radius: 5px; }
#p5 { border-width: 10px border-color: brown; border-style: double; border-radius: 5px; }
#p6 { border-width: 10px border-color: brown; border-style: groove; border-radius: 5px; }
#p7 { border-width: 10px border-color: green; border-style: ridge; border-radius: 5px; }
#p8 { border-width: 10px border-color: blue; border-style: inset; border-radius: 5px; }
#p9 { border-width: 10px border-color: yellow; border-style: outset; border-radius: 5px; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p4">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p5">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p6">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p7">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p8">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p9">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

border Property

Css मे border property को short hand property भी कहा जाता है वैसे तो इस property के बारे मे पहले ही बता चूका हु css image article मे लेकिन फिर भी हम border property के बारे मे जान लेते है |

CSS मे border property के द्वारा आप अपने border का width, color और border एक साथ define कर सकते है | अब निचे दिये गये example को देखे |

<html>
<head>
<style type="text/css">
#p1 { border-style: none; }
#p2 { border: 10px solid lime; }
#p3 { border: 10px dashed pink;}
#p4 { border: 10px dotted purple; }
#p5 { border: 10px double brown; }
#p6 { border: 10px groove brown; }
#p7 { border: 10px ridge green; }
#p8 { border: 10px inset blue; }
#p9 { border: 10px outset yellow; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p4">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p5">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p6">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p7">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p8">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p9">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
CSS Height Properties CSS Margin Properties
Previous Next