कस्टम CSS बॉर्डर जनरेटर

CSS बॉर्डर की मोटाई, स्टाइल, रंग और गोलाई (रेडियस) को समान रूप से या प्रति साइड सेट करें — साथ ही लाइव प्रीव्यू देखें और तैयार कोड कॉपी करें। 100% स्थानीय प्रोसेसिंग — सर्वर पर कुछ नहीं भेजा जाता।

उदाहरण:
CSS कोड

यह कैसे काम करता है

CSS बॉर्डर तीन जानकारियों का संयोजन है: मोटाई, लाइन स्टाइल और रंग, और इसे border-radius से गोल किया जा सकता है। यह टूल आपको इन मानों को चारों तरफ समान रूप से या प्रत्येक साइड के लिए अलग-अलग सेट करने की सुविधा देता है, साथ ही कोड कॉपी करने से पहले प्रभाव की पुष्टि के लिए तुरंत विज़ुअल प्रीव्यू दिखाता है।

"groove", "ridge", "inset" और "outset" में क्या अंतर है?

ये चारों स्टाइल चुने गए रंग के आधार पर 3D उभार का प्रभाव बनाते हैं: "groove" खुदे हुए खांचे जैसा, "ridge" उभरे हुए किनारे जैसा, "inset" दबे हुए फ्रेम जैसा और "outset" उभरे हुए फ्रेम जैसा दिखाई देते हैं; सटीक रेंडर ब्राउज़र और प्रयुक्त बैकग्राउंड रंग पर निर्भर करता है।

"border" शॉर्टकट का उपयोग करने के बजाय प्रति साइड मोटाई अलग-अलग क्यों सेट करें?

border शॉर्टकट हर साइड के लिए अलग मोटाई निर्धारित नहीं कर सकता; असममित प्रभाव (ऊपर मोटी बॉर्डर, किनारों पर पतली) के लिए विस्तृत प्रॉपर्टीज़ जैसे border-top-width, border-right-width आदि का उपयोग करना होता है, जैसा यह टूल तब करता है जब "समान मोटाई" विकल्प बंद हो।

सर्वर पर कोई डेटा नहीं भेजा जाता: प्रीव्यू और कोड सीधे आपके ब्राउज़र में जनरेट होते हैं।