गुण border-image-width

गुण border-image-width बॉर्डर के दृश्यमान भाग की चौड़ाई को नियंत्रित करता है, इसका स्केल बदलता है। यदि यह मान border-width की चौड़ाई से अधिक है, तो बॉर्डर छवि सामग्री के नीचे चली जाएगी।

अधिक विस्तृत जानकारी के लिए गुण border-image देखें।

सिंटैक्स

सिलेक्टर {
	border-image-width: CSS इकाइयाँ | प्रतिशत | संख्या | auto;
}

मान

मान	विवरण
CSS इकाइयाँ	निर्दिष्ट CSS इकाइयों में मान।
प्रतिशत	बॉर्डर वाले ब्लॉक के आकार के सापेक्ष प्रतिशत मान।
संख्या	संख्यात्मक मान, जिससे `border-width` गुणा होती है।
`auto`	कीवर्ड। यदि निर्दिष्ट है, तो मान संबंधित `border-image-slice` के बराबर होता है। यदि कोई उपयुक्त आकार नहीं है, तो `border-width` का मान उपयोग किया जाता है, जबकि छवि सामग्री के नीचे जाते हुए, बॉर्डर के पूरे कोने को भर देती है। बेहतर समझ के लिए उदाहरण देखें।

डिफ़ॉल्ट मान: 1।

उदाहरण . संख्या

एलिमेंट पर माउस होवर करने पर border-image-width का मान 2 पर सेट करें। इससे बॉर्डर का आकार 26px*2 हो जाएगा - border-width में निर्दिष्ट इसकी चौड़ाई से 2 गुना अधिक। बॉर्डर इसके बाद टेक्स्ट (फ़ॉन की तरह) के नीचे चली जाएगी:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . border-image-repeat को round पर बदलें

पिछले उदाहरण में, होवर करने पर बॉर्डर में रोम्बस की पूरी संख्या नहीं होगी। इसे border-image-repeat को round मान पर सेट करके ठीक करें:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . प्रतिशत

एलिमेंट पर माउस होवर करने पर border-image-width का मान 50% पर सेट करें। इससे बॉर्डर का आकार ब्लॉक के आकार का 50% हो जाएगा (यानी दाईं और बाईं दोनों बॉर्डर पूरे ब्लॉक को ढक लेंगी):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . प्रतिशत

एलिमेंट पर माउस होवर करने पर border-image-width का मान 30% पर सेट करें। इससे बॉर्डर का आकार ब्लॉक के आकार का 30% हो जाएगा:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . पिक्सेल

एलिमेंट पर माउस होवर करने पर border-image-width का मान 50px पर सेट करें:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . मान auto

एलिमेंट पर माउस होवर करने पर border-image-width का मान auto पर सेट करें।

होवर करने से पहले border-image-width का मान 1 (डिफ़ॉल्ट) होता है। उदाहरण में विशेष रूप से border-width को 52px पर सेट किया गया है, और border-image-slice - 26 मान पर (auto का प्रभाव केवल तभी देखा जाएगा जब border-width, border-image-slice के बराबर न हो)। इसलिए कि border-image-width का मान 1 है, बॉर्डर छवि border-width की पूरी चौड़ाई घेर लेगी, यानी 52px तक फैल जाएगी। होवर करने पर border-image-width का मान auto पर सेट हो जाएगा और छवि की चौड़ाई border-image-slice के मान के बराबर हो जाएगी, यानी 26px:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

यह भी देखें

गुण border-image,
जो बॉर्डर-छवि के लिए शॉर्टहैंड है
गुण border-image-source,
जो बॉर्डर के लिए छवि का पथ निर्दिष्ट करता है
गुण border-image-slice,
जो बॉर्डर के लिए छवि को स्लाइस करता है
गुण border-image-repeat,
जो बॉर्डर के लिए छवि को रिपीट करता है
गुण border-image-outset,
जो बॉर्डर के लिए छवि को आगे बढ़ाता है