إدراج نصف قطر الحدود باستخدام تدرجات CSS3

من الممكن تحقيق نصف قطر حدود داخلي بدون صور من خلال استخدام تدرجات CSS3. يتضمن هذا الأسلوب وضع عدة طبقات من التدرجات الشعاعية الشفافة لإنشاء وهم بحد منحني داخليًا حول عنصر ما.

يستخدم كود CSS التالي حل Lea Verou لإنشاء نصف قطر حدود داخلي باستخدام التدرجات:

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;
}

في هذا الكود، يتم وضع عدة تدرجات شعاعية شفافة في نقاط محددة حول العنصر لإنشاء وهم منحنى داخلي. والنتيجة هي مجموعة من التدرجات الشفافة ذات المنحنيات، مما ينتج عنه تأثير نصف قطر الحدود الداخلي.

من المهم ملاحظة أن هذا الحل يتطلب دعم RGBA والتدرجات، والتي قد لا تكون مدعومة من قبل جميع المتصفحات القديمة وتتطلب تحسين تدريجي أو بديل قائم على الصور للمتصفحات القديمة التي لا تدعم التدرجات.