CSS Borders

Borders वे visible lines हैं जो किसी element के edges के चारों ओर wrap होती हैं, और ये किसी चीज़ को visual structure देने के सबसे simple तरीकों में से एक हैं, जैसे कोई card, button, या table cell। एक CSS border को असल में दिखने के लिए तीन चीज़ें चाहिए होती हैं: एक style (solid, dashed, dotted), एक width, और एक color। आप तीनों को individually set कर सकते हैं, उन्हें एक साथ set करने के लिए shorthand border property इस्तेमाल कर सकते हैं, या border-radius से corners को पूरी तरह round भी कर सकते हैं। cookiescursor.com जैसी किसी असली site पर borders हर जगह दिखते हैं, subtle card outlines से लेकर bold, rounded buttons तक।

In this page:

border-style
border-width और border-color
Shorthand border Property
border-radius
Individual Side Borders

Syntax

css

selector {
  border: width style color;
}

border-style

border-style किसी border का line pattern set करता है, जैसे solid, dashed, या dotted। बिना style set किए, कोई border render नहीं होगा भले ही width और color set हों। एक common beginner mistake है border-width और border-color set करना लेकिन border-style भूल जाना, जिसका नतीजा बिल्कुल कोई visible border न होना है।

Note:

cards और buttons जैसे रोज़मर्रा के UI elements के लिए solid सबसे common border style है।
Accepted values:
none — कोई border नहीं (initial value)
hidden — कोई border नहीं; table border conflicts में जीतता है
solid — एक continuous line
dashed — dashes की एक series
dotted — dots की एक series
double — दो parallel lines
groove / ridge — 3D carved या raised look
inset / outset — 3D sunken या raised look
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: border-style: none (default) का मतलब है कोई border नहीं दिखता, चाहे आपने कहीं भी width या color set किया हो।

उदाहरण: border-style

css

<style>
.a { border-width: 4px; border-color: red; }
.b { border-width: 4px; border-color: red; border-style: solid; }
</style>
<div class="a">No border-style: invisible</div>
<div class="b">border-style: solid, now visible</div>

border-width और border-color

border-width control करता है कि border कितना मोटा है, और border-color उसका color set करता है। border-style के साथ मिलकर, ये तीन properties पूरी तरह एक visible border describe करती हैं। दोनों किसी भी दूसरी CSS color property जैसे ही color formats accept करती हैं, hex, RGB, और named colors सहित।

Note:

Subtle UI outlines के लिए border-width को छोटा रखें (1px से 2px), मोटे borders कहीं ज़्यादा visual attention खींचते हैं।
Accepted values:
length — जैसे 1px, 4px या 0.1em
thin / medium / thick — keywords (border-width)
color — कोई भी color, transparent या currentcolor (border-color)
0 — width हटा देता है
एक से चार values — top, right, bottom, left order
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: border-color कोई भी valid CSS color accept करता है, लेकिन अगर इसे unset छोड़ दिया जाए, तो ज़्यादातर browsers default रूप से element की खुद की text color इस्तेमाल करते हैं।

उदाहरण: border-width and border-color

css

<style>
.box {
  border-style: solid;
  border-width: 3px;
  border-color: navy;
}
</style>
<div class="box">Width and color together</div>

Shorthand border Property

border shorthand आपको width, style, और color एक साथ एक ही declaration में उसी order में set करने देती है, तीन अलग properties लिखने के बजाय। अगर आपको हर side के लिए अलग values चाहिए, तो आपको फिर भी shorthand के बजाय individual properties पर वापस जाना होगा।

Note:

shorthand order (width, style, color) याद रखना आसान है क्योंकि यह 'कितना मोटा' से 'कौन-सा pattern' से 'कौन-सा color' तक जाता है।
Accepted values:
width — length या thin, medium, thick
style — solid, dashed, dotted, double और दूसरे
color — कोई भी color value
values किसी भी order में आ सकती हैं
style — border दिखने के लिए ज़रूरी है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: shorthand में (या कहीं भी) border-style छोड़ देने से फिर भी बिल्कुल कोई visible border नहीं मिलता।

उदाहरण: Shorthand border Property

css

<style>
.box {
  border: 3px solid navy;
}
</style>
<div class="box">Width, style, and color in one line</div>

border-radius

border-radius किसी element के corners को round कर देता है, हल्के curve से लेकर element के size के relative काफ़ी ज़्यादा set करने पर पूरी तरह circular shape तक। किसी square element पर सभी चार corners को 50% set करना एक perfect circle बनाने की classic technique है।

Note:

एक छोटा border-radius, जैसे 6px से 10px, cards और buttons को थोड़ा softer महसूस कराने का एक common, subtle तरीका है।
Accepted values:
length — जैसे 8px
percentage — box size के relative
50% — square पर circle, वरना ellipse
9999px — pill shape
/ के साथ दो values — elliptical corners, जैसे 50px / 20px
एक से चार values — top-left, top-right, bottom-right, bottom-left
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: किसी square element पर border-radius को 50% set करना उसे एक perfect circle बना देता है, जो कभी-कभी हैरान करने वाला होता है अगर वह लक्ष्य नहीं था।

उदाहरण: border-radius

css

<style>
.box {
  width: 80px;
  height: 80px;
  border: 2px solid black;
  border-radius: 50%;
}
</style>
<div class="box"></div>

Individual Side Borders

एक साथ सभी चार sides को style करने के बजाय, border-top, border-right, border-bottom, और border-left जैसी properties आपको किसी element के सिर्फ एक side को style करने देती हैं। यह tab-जैसे designs बनाने या बाकी box को असर किए बिना सिर्फ एक edge को highlight करने के लिए खासतौर पर उपयोगी है।

Note:

एक अकेला colored border-left किसी callout या highlighted text block को mark करने का एक लोकप्रिय, understated तरीका है।
Accepted values:
border-top — top side के लिए width style color
border-right — right side के लिए
border-bottom — bottom side के लिए
border-left — left side के लिए
border-block / border-inline — logical equivalents
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: Individual side borders अपने आप बाकी sides को असर नहीं करते, अगर आप सिर्फ border-bottom set करें, तो बाकी तीन sides unstyled रहते हैं।

उदाहरण: Individual Side Borders

css

<style>
.box {
  border-left: 4px solid blue;
}
</style>
<div class="box">Only the left side is styled</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Clip Next Lesson → CSS Border Style

CSS Borders

border-style

border-width और border-color

Shorthand border Property

border-radius

Individual Side Borders

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code