इनसेट बॉर्डर-रेडियस CSS3 ग्रेडिएंट्स का उपयोग करना

छवियों के बिना इनसेट बॉर्डर-रेडियस प्राप्त करना CSS3 ग्रेडिएंट्स के उपयोग के माध्यम से संभव है। इस दृष्टिकोण में किसी तत्व के चारों ओर अंदर की ओर घुमावदार सीमा का भ्रम पैदा करने के लिए कई पारदर्शी रेडियल ग्रेडिएंट्स को परत करना शामिल है।

निम्नलिखित सीएसएस कोड ग्रेडिएंट्स का उपयोग करके इनसेट बॉर्डर-त्रिज्या बनाने के लिए ली वेरौ के समाधान का उपयोग करता है:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

इस कोड में, आवक वक्र का भ्रम पैदा करने के लिए कई पारदर्शी रेडियल ग्रेडिएंट तत्व के चारों ओर विशिष्ट बिंदुओं पर स्थित होते हैं। परिणाम कर्व्स के साथ पारदर्शी ग्रेडिएंट्स का एक सेट है, जो इनसेट बॉर्डर-त्रिज्या प्रभाव पैदा करता है। पुराने ब्राउज़रों के लिए प्रगतिशील संवर्द्धन या छवि-आधारित फ़ॉलबैक जो ग्रेडिएंट का समर्थन नहीं करते हैं।