बॉर्डर-इमेज-रिपीट गुण

border-image-repeat गुण बॉर्डर के आंतरिक भाग को छवि के रूप में दोहराने का तरीका निर्धारित करता है। अधिक जानकारी के लिए border-image गुण देखें।

सिंटैक्स

सेलेक्टर {
	border-image-repeat: stretch | repeat | round;
}

मान

मान	विवरण
`stretch`	बॉर्डर की छवि को एलिमेंट के आकार तक खींचता है। यह मान डिफ़ॉल्ट रूप से उपयोग किया जाता है।
`repeat`	बॉर्डर की छवि को दोहराता है।
`round`	छवि को दोहराता है और स्केल करता है ताकि एलिमेंट की साइड पर छवियों की पूर्ण संख्या हो।

डिफ़ॉल्ट मान: stretch.

पैरामीटर की संख्या

1 या 2 पैरामीटर ले सकता है। यदि दो पैरामीटर दिए गए हैं, तो उनमें से पहला ऊपरी और निचली बॉर्डर के लिए होगा, और दूसरा पैरामीटर - बाएं और दाएं के लिए।

उदाहरण . stretch मान

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

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

उदाहरण . repeat मान

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

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

उदाहरण . round मान

अब सामान्य स्थिति में repeat मान सेट है, और होवर पर - round। ध्यान दें कि होवर से पहले बॉर्डर में रोम्बस की पूर्ण संख्या नहीं है, जबकि होवर के बाद - पूर्ण संख्या है। इस तरह round काम करता है:

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

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

उदाहरण . दो शब्द

चौड़ाई के लिए repeat मान और ऊंचाई के लिए stretch मान:

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

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

यह भी देखें

border-image गुण,
जो बॉर्डर-इमेज के लिए शॉर्टहैंड है
border-image-source गुण,
जो बॉर्डर के लिए छवि का पथ निर्धारित करता है
border-image-slice गुण,
जो बॉर्डर के लिए छवि को स्लाइस करता है
border-image-width गुण,
जो बॉर्डर के लिए छवि का आकार निर्धारित करता है
border-image-outset गुण,
जो बॉर्डर के लिए छवि का ऑफसेट निर्धारित करता है