क्या त्रिज्या के साथ एक रूपरेखा सीमा बनाना संभव है?

Question

मुझे पता है कि आप CSS3 के साथ एक रूपरेखा सीमा जोड़ सकते हैं।

outline: 10px solid red; 

अब मैं सोच रहा था कि मैं उस रूपरेखा सीमा में त्रिज्या कैसे जोड़ सकता हूं।

मैं इस एक कोशिश की है, लेकिन काम नहीं करता:

.radius { 
    padding: 20px 60px; 
    text-transform: capitalize; 

    -moz-outline: 10; 
    outline: 10px solid red; 

    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px;  
} 

Answer 1

Firefox has a property -moz-outline-radius, तथापि वेबकिट में एक ऐसी ही सुविधा को लागू करने के लिए अनुरोध closed as WONTFIX था। भविष्य के लिए योजना make the outlines follow the borders है।

मुझे एहसास है कि इससे ज्यादा मदद नहीं मिलती है, लेकिन आपके प्रश्न का उत्तर यह है: वर्तमान में, नहीं (क्रॉस ब्राउज़र के रास्ते में नहीं)। इस बीच आपको एक वैकल्पिक दृष्टिकोण का उपयोग करना चाहिए जैसे कि कलकबान द्वारा सुझाए गए।

Answer 2

CSS-Tricks' Infinite Borders technique का उपयोग करने और लागू करने के border-radius की कोशिश करो।

इस विधि को सीमाओं और box-shadow की आवश्यकता होगी और रूपरेखा नहीं होगी।

Here is the fiddle link

Answer 3

@MichaelYaeger उपयोगकर्ता 1685185 के समान जवाब, लेकिन एक अद्यतन JSFiddle के साथ, border-radius और box-shadow का उपयोग करें। यह जेएस फिडल एक गोलाकार बटन (बूटस्ट्रैप) के आस-पास "सीमा" का उपयोग करके दिखाया गया है, लेकिन यह एक छवि लागू करता है, आदि