CSS Border Width

Border width सीधे तौर पर यह है कि border line कितनी मोटी draw होती है, इसे या तो thin या medium जैसे keyword से set किया जाता है, या 3px जैसी exact length से।

In this page:

Keyword Widths
Length-Based Widths
Border Width को एक Style चाहिए
Per-Side Widths
Shorthand में Width

Syntax

css

selector {
  border-width: thin | medium | thick | length;
}

Keyword Widths

border-width thin, medium (default), और thick keywords accept करता है। ये browser-defined pixel values से map होते हैं जो हर browser में एक जैसी नहीं होतीं, इसलिए pixel-precise designs के लिए keywords के बजाय आमतौर पर एक explicit length unit prefer किया जाता है।

Note:

Accepted values:
length — 2px या 0.25rem जैसा कोई भी non-negative size
thin — आमतौर पर 1px
medium — आमतौर पर 3px (default)
thick — आमतौर पर 5px
दिखने के लिए none के अलावा कोई border-style चाहिए
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Keyword Widths

css

<style>
.thin { border: thin solid black; }
.medium { border: medium solid black; }
.thick { border: thick solid black; }
</style>
<div class="thin">thin</div>
<div class="medium">medium</div>
<div class="thick">thick</div>

Length-Based Widths

border-width के लिए कोई भी CSS length unit काम करता है: exact pixel control के लिए px, font size के साथ scale करने के लिए em/rem, और percentages खासतौर पर border-width के लिए allowed NAHI हैं (padding/margin के उलट)।

Note:

Accepted values:
length — जैसे 1px, 4px या 0.1em
thin | medium | thick — keywords
0 — width हटा देता है
एक से चार values — top, right, bottom, left order
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Length-Based Widths

css

<style>
.px { border: 3px solid black; }
.rem { border: 0.2rem solid black; }
</style>
<div class="px">3px</div>
<div class="rem">0.2rem</div>

Border Width को एक Style चाहिए

color की तरह ही, किसी border-width value का कोई visible effect नहीं होता जब तक border-style को none के अलावा किसी और चीज़ पर set न किया जाए — सिर्फ width किसी border को दिखने पर मजबूर नहीं करती।

उदाहरण: Border Width Requires a Style

css

<style>
.no-style { border-width: 5px; }
.with-style { border-width: 5px; border-style: solid; }
</style>
<div class="no-style">Invisible: no border-style</div>
<div class="with-style">Visible</div>

Per-Side Widths

border-top-width, border-right-width, border-bottom-width, और border-left-width हर side की मोटाई independently set करते हैं, जिससे आप एक मोटी left accent bar और बाकी जगह पतले borders जैसे asymmetric borders बना सकते हैं।

Note:

Accepted values:
length — जैसे 1px, 4px या 0.1em
thin | medium | thick — keywords
0 — width हटा देता है
border-top-width आदि — हर एक एक width लेता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Per-Side Widths

css

<style>
.box {
  border-style: solid;
  border-left-width: 8px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
</style>
<div class="box">Thick left accent bar</div>

Shorthand में Width

border shorthand (border: width style color) के अंदर, width एक keyword या length हो सकती है और अगर तीनों values मौजूद हों तो उसे पहले आना चाहिए, हालांकि shorthand values को छोड़ना भी सह लेता है।

Note:

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

उदाहरण: Width in the Shorthand

css

<style>
.box {
  border: 4px solid navy;
}
</style>
<div class="box">Width comes first in the shorthand</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Border Style Next Lesson → CSS Border Color

CSS Border Width

Keyword Widths

Length-Based Widths

Border Width को एक Style चाहिए

Per-Side Widths

Shorthand में Width

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code