बॉर्डर-इमेज-आउटसेट गुण

border-image-outset गुण तत्व की सीमा के बाहर बॉर्डर को स्थानांतरित करने की अनुमति देता है। मान के रूप में माप की इकाइयों के बिना एक संख्या निर्दिष्ट की जाती है या कोई भी आकारों के लिए इकाइयाँ , प्रतिशत को छोड़कर। यदि इकाइयों के बिना एक संख्या निर्दिष्ट की जाती है, तो यह एक गुणक है, जिससे border-width गुण के मान गुणा किए जाते हैं। नकारात्मक मान समर्थित नहीं हैं।

बॉर्डर के लिए छवियों पर अधिक विस्तृत जानकारी के लिए border-image गुण देखें।

सिंटैक्स

cssसिलेक्टर {
  border-image-outset: धनात्मक संख्या;
}

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

border-image-outset का मान 3 पर सेट करें जब माउस को तत्व पर घुमाया जाए। इसके परिणामस्वरूप बॉर्डर 26px*3 पर स्थानांतरित हो जाएगी - 3 गुना दूर, border-width में निर्दिष्ट इसकी चौड़ाई से:

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

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

Результат:

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

border-image-outset का मान 30px पर सेट करें जब माउस को तत्व पर घुमाया जाए। इसके परिणामस्वरूप बॉर्डर 30px पर स्थानांतरित हो जाएगी:

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

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

Результат:

यह भी देखें