CSS [बंद] का उपयोग करके गोल कोनों को बनाना

Question

मैं CSS का उपयोग करके गोल कोनों को कैसे बना सकता हूं?

Comments

यहां केवल सीएसएस का उपयोग करके गोल कोनों को बनाने का एक अच्छा वीडियो है: < sampsonvideos.com/video.php?video=12 >

— स्टेन

याहू डेवलपर नेटवर्क से गोल कोनों की तकनीक पर अनुच्छेद - 2007 से। और एक YUI फलक l के लिए गोल कोनों (छवियों की आवश्यकता) को जोड़ने का एक तरीका ।

— सिमोन_विवर

200+ लाइक कहते हैं कि यह रचनात्मक है।

— स्टीवकैव

मेरा मानना ​​है कि यह एक मूल्यवान विहित प्रश्न है, जो फिर से खोलने के योग्य है, खासकर क्योंकि यह अब सामुदायिक विकि है।

— डेविडआरआर

सिवाय इसके कि यह ऐसी जानकारी है जो वेब पर कई अन्य स्थानों पर तुच्छ रूप से खोजने योग्य है। मौजूदा संसाधनों की नकल करने के लिए एसओ की जरूरत नहीं है।

— जिम गैरिसन

Answer 1

चूंकि CSS3 पेश किया गया था, इसलिए border-radiusसंपत्ति का उपयोग करके सीएसएस का उपयोग करके गोल कोनों को जोड़ने का सबसे अच्छा तरीका है । आप संपत्ति पर युक्ति पढ़ सकते हैं, या एमडीएन पर कुछ उपयोगी कार्यान्वयन जानकारी प्राप्त कर सकते हैं :

यदि आप एक ब्राउज़र का उपयोग कर रहे हैं जो लागू नहीं होता है border-radius (क्रोम प्री-वी 4, फ़ायरफ़ॉक्स प्री-वी 4, आईई 8, ओपेरा प्री-वी 10.5, सफारी प्री-वी 5), तो नीचे दिए गए लिंक अलग-अलग दृष्टिकोणों के एक पूरे गुच्छा का विस्तार करते हैं। अपनी साइट और कोडिंग शैली के अनुरूप एक खोजें, और उसके साथ जाएं।

1. सीएसएस डिजाइन: कस्टम कोनों और सीमाएँ बनाना
2. सीएसएस राउंड कॉर्नर 'राउंडअप'
3. सीएसएस के साथ 25 गोल कोनों तकनीक

Comments

मुझे लगता है कि DD_roundies प्रीफेक्ट समाधान है: dillerdesign.com/experiment/DD_roundies/#nogo

— vsync

@vsync लेकिन यह अच्छी तरह से समर्थित नहीं है IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers

— जितेन्द्र व्यास

उपयोगी लिंक यदि आप CSS3 (जैसे SO) बॉर्डर-radius.com (एक और रेफरी। css3.info/border-radius-apple-vs-mozilla ) के साथ जाने का फैसला करते हैं

— मिकथोमप्सन

तीसरा लिंक काम नहीं कर रहा है cssjuice.com/25-rounded-corners-techniques-with-css

— कृष्ण

Answer 2

मैंने स्टैक ओवरफ्लो के निर्माण में इस पर जल्दी देखा और गोल कोनों को बनाने का कोई तरीका नहीं पा सका , जिसने मुझे ऐसा महसूस नहीं होने दिया कि मैं बस एक सीवर के माध्यम से चला गया।

CSS3 अंत में परिभाषित करता है

border-radius:

ठीक यही है कि आप इसे कैसे काम करना चाहते हैं। हालांकि यह सफारी और फ़ायरफ़ॉक्स के नवीनतम संस्करणों में ठीक काम करता है, लेकिन IE7 में बिल्कुल नहीं (और मैं IE8 में नहीं सोचता) या ओपेरा।

इस बीच, यह सभी तरह से नीचे हैक्स है। मुझे यह सुनने में दिलचस्पी है कि अन्य लोगों को क्या लगता है कि IE7, FF2 / 3, Safari3, और ओपेरा 9.5 इस समय ऐसा करने का सबसे साफ तरीका है।

Comments

"... मैं एक सीवर के माध्यम से चला गया?" यह थोड़ा कठोर है, जेफ। उत्तर है, यह निर्भर करता है।" एकल रंग, ढाल, या ड्रॉप-शैड बॉक्स? क्या उन्हें लंबवत, क्षैतिज या दोनों का विस्तार करने की आवश्यकता है? विभिन्न आवश्यकताओं के लिए विभिन्न समाधान। जितनी आवश्यकता हो, उतने ही अधिक सीवर जैसे समाधान।

— कार्ल कैमरा

मैं इस पद्धति का उपयोग करना पसंद करूंगा। यदि कोई ब्राउज़र इसका समर्थन नहीं करता है, तो कौन परवाह करता है?

— सैम मरे-सटन

ट्विटर ने IE उपयोगकर्ताओं को अपनी वेबसाइट पर इंगित कोनों को गोल कोने की सुविधा को डाउनग्रेड किया। वास्तव में कोई बड़ी बात नहीं है।

— लांस फिशर

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

— thSoft

मैं इस उत्तर को वोट देना चाहता हूं, क्योंकि यह वर्णन नहीं करता है कि उत्तर देने वाला (जेफ) क्या सबसे अच्छा तरीका है।

— अल्लियोरकोड

Answer 3

मैं आमतौर पर सीएसएस के साथ गोल कोनों को प्राप्त करता हूं, अगर ब्राउज़र समर्थन नहीं करता है तो वे फ्लैट कोनों के साथ सामग्री को देखते हैं। यदि आपकी साइट के लिए गोल कोने इतने महत्वपूर्ण नहीं हैं, तो आप नीचे इन पंक्तियों का उपयोग कर सकते हैं।

यदि आप एक ही त्रिज्या वाले सभी कोनों का उपयोग करना चाहते हैं तो यह आसान तरीका है:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

लेकिन अगर आप हर कोने को नियंत्रित करना चाहते हैं तो यह अच्छा है:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

जैसा कि आप प्रत्येक सेट में देखते हैं कि आपके पास ब्राउज़र विशिष्ट शैलियाँ हैं और चौथी पंक्तियों में हम मानक तरीके से यह घोषणा करते हैं कि हम यह मानते हैं कि यदि भविष्य में अन्य (उम्मीद है कि IE) भी इस सुविधा को लागू करने का निर्णय लेते हैं तो हमारी शैली उनके लिए भी तैयार होगी।

जैसा कि अन्य उत्तरों में बताया गया है, यह फ़ायरफ़ॉक्स, सफारी, कैमिनो, क्रोम पर खूबसूरती से काम करता है।

Answer 4

यदि आप IE में कोने बनाने में रुचि रखते हैं तो यह उपयोग का हो सकता है - http://css3pie.com/

Comments

यह पूरी तरह से अन्य ब्राउज़रों के लिए -moz आदि कोनों को परिभाषित करने के साथ-साथ मेरे लिए काम करता है।

— बोराल

Answer 5

मैं पृष्ठभूमि छवियों का उपयोग करने की सलाह दूंगा। अन्य तरीके लगभग अच्छे नहीं हैं: एंटी-अलियासिंग और सेंसलेस मार्कअप नहीं। यह जावास्क्रिप्ट का उपयोग करने का स्थान नहीं है।

Comments

जावास्क्रिप्ट में निश्चित रूप से विफलता की उच्चतम गुंजाइश है, और मेरे अनुभव में चंचलता है। सभी jquery प्लगइन्स मैंने कोशिश की है कि किसी तरह के अप्रत्याशित दुष्प्रभाव हों

— Simon_Weaver

CurvyCorners ( curvycorners.net ) और ShadedBorder ( ruzee.com/blog/shadedborder ) एंटी-अलियासिंग का समर्थन करने का प्रबंधन करते हैं । इन संस अतिरिक्त मार्कअप का उपयोग करने के तरीके भी हैं, आप एक वर्ग के साथ लागू कर सकते हैं और फिर मार्कअप को क्लास तत्वों में गतिशील रूप से जोड़ा जाता है। उस ने कहा, जितना अधिक मैं उनका उपयोग करता हूं उतना ही सही लगता है ... वे प्रोटोटाइप के लिए उपयोगी होते हैं, लेकिन डोम में बहुत अधिक अतिरिक्त वजन जोड़ते हैं। अब जब मैंने अपना मनचाहा तरीका एडजस्ट कर लिया है, तो मैंने उन्हें इमेज में बदलने की योजना बनाई है।

— बेन रेजेन्सपेन 13

इस उत्तर में किसी के लिए लगभग पर्याप्त विवरण शामिल नहीं है जिसे लागू करने के लिए उत्तरदाता सोच रहा है।

— allyourcode

Answer 6

जैसा कि ब्रजेश्वर ने कहा: border-radiuscss3 चयनकर्ता का उपयोग करना । अब तक, आप आवेदन कर सकते हैं -moz-border-radiusऔर -webkit-border-radiusमोजिला और वेबकिट के लिए आधारित ब्राउज़र, क्रमशः।

तो, इंटरनेट एक्सप्लोरर के साथ क्या होता है ?. Microsoft में Internet Explorer बनाने के लिए कई व्यवहार हैं और कुछ अतिरिक्त सुविधाएँ हैं।

यहाँ: अपने सीएसएस में मूल्य से .htcप्राप्त करने के लिए एक व्यवहार फ़ाइल । उदाहरण के लिए।round-cornersborder-radius

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

बेशक, व्यवहार चयनकर्ता एक वैध चयनकर्ता नहीं है, लेकिन आप इसे सशर्त टिप्पणियों (केवल आईई) के साथ एक अलग सीएसएस फ़ाइल पर रख सकते हैं।

व्यवहार एचटीसी फ़ाइल

Comments

कभी समझ में नहीं आया कि इतने सीएसएस सत्यापन के साथ संबंध क्यों हैं। यह कुछ भी मायने नहीं रखता है, केवल डोम सत्यापन मायने रखता है।

— vsync

यह जाने का रास्ता दिखता है।

— मैथ्यू ओलेनिक

क्या आप एक व्यवहार फ़ाइल क्या है की एक संक्षिप्त विवरण जोड़ सकते हैं? मुझे लगता है कि इस सवाल का जवाब तलाशने वाला व्यक्ति शायद उन लोगों से परिचित नहीं है।

— एलोयूरकोड

लगता है व्यवहार फ़ाइल लिंक मर चुका है

— evanmcd

Answer 7

सीएसएस 3 को फ़ायरफ़ॉक्स, सफारी और क्रोम के नए संस्करणों में लागू करने के लिए समर्थन के साथ, "बॉर्डर रेडियस" देखने में भी मदद मिलेगी।

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

किसी भी अन्य सीएसएस शॉर्टहैंड की तरह, ऊपर भी विस्तारित प्रारूप में लिखा जा सकता है, और इस प्रकार टॉपलेट, टॉपराइट, आदि के लिए अलग-अलग सीमा त्रिज्या प्राप्त करते हैं।

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

Comments

आपका सिंटैक्स -webkit-border-bottom-rightright-radius: 3px; और -webkit-border-top-rightright-radius: 10px; -webkit-border-bottom-right-radius पढ़ना चाहिए: 3px और -webkit-border-top-right-radius: 10px;

— वोल्फर

Answer 8

jQuery वह तरीका है जिससे मैं व्यक्तिगत रूप से निपटूंगा। सीएसएस समर्थन कम से कम है, चित्र बहुत ही काल्पनिक हैं, उन तत्वों का चयन करने में सक्षम होने के लिए जिन्हें आप jQuery में गोल कोनों में रखना चाहते हैं, मेरे लिए एकदम सही समझ में आता है, हालांकि कुछ को कोई संदेह नहीं होगा। एक प्लग इन है जिसे मैंने हाल ही में एक प्रोजेक्ट के लिए यहां काम में लिया था: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Comments

@mcaulay - क्या यह बॉक्स को एक छाया देने का भी समर्थन करता है?

— निकेतनलाइन

jquery राउंडकॉर्कर IE 8 का समर्थन नहीं करता है

— 22

Answer 9

हमेशा जावास्क्रिप्ट तरीका होता है (अन्य उत्तर देखें) लेकिन चूंकि यह विशुद्ध रूप से स्टाइल है, इसलिए मैं इसे प्राप्त करने के लिए क्लाइंट स्क्रिप्ट का उपयोग करने के खिलाफ हूं।

जिस तरह से मैं पसंद करता हूं (हालांकि इसकी सीमाएं हैं), 4 गोल कोने की छवियों का उपयोग करना है जो आप सीएसएस के साथ अपने बॉक्स के 4 कोनों में स्थित करेंगे:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

---

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

जैसा कि उल्लेख किया गया है, इसकी सीमाएं हैं (गोल बॉक्स के पीछे की पृष्ठभूमि सादे होनी चाहिए अन्यथा कोने पृष्ठभूमि से मेल नहीं खाएंगे), लेकिन यह किसी और चीज के लिए बहुत अच्छी तरह से काम करता है।

---

अपडेट किया गया: स्प्राइट शीट का उपयोग करके निहितार्थ में सुधार।

Comments

यह सभी सीएसएस स्प्राइट्स का उपयोग करके सरल बनाया जा सकता है, शायद मैं अपना जवाब अपडेट करूंगा।

— mbillard 21

वहां, मैंने स्प्राइट शीट का उपयोग करने के लिए कोड अपडेट किया।

— 15

Answer 10

मैं व्यक्तिगत रूप से इस समाधान को सबसे अधिक पसंद करता हूं, इसका एक .htc है जो IE को घुमावदार सीमाओं को प्रस्तुत करने की अनुमति देता है।

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Answer 11

Safari, Chrome, Firefox> 2, IE> 8 और Konquerer (और शायद अन्य) में आप border-radiusसंपत्ति का उपयोग करके इसे CSS में कर सकते हैं। के रूप में यह आधिकारिक तौर पर अभी तक का हिस्सा नहीं है, कृपया एक विक्रेता विशिष्ट उपसर्ग का उपयोग करें ...

उदाहरण

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

जावास्क्रिप्ट समाधान आम तौर पर छोटे divएस के एक जोड़ को गोल करने के लिए जोड़ते हैं , या वे 1px नोट किए गए कोनों को बनाने के लिए सीमाओं और नकारात्मक मार्जिन का उपयोग करते हैं। कुछ भी IE में SVG का उपयोग कर सकते हैं।

IMO, CSS तरीका बेहतर है, क्योंकि यह आसान है, और उन ब्राउज़रों में शान से नीचा दिखाएगा जो इसका समर्थन नहीं करते हैं। यह, ज़ाहिर है, केवल उस मामले में जहां क्लाइंट IE <9 जैसे गैर-समर्थित ब्राउज़र में उन्हें लागू नहीं करता है।

Answer 12

यहाँ एक HTML / js / css समाधान है जो मैंने हाल ही में किया था। IE में पूर्ण स्थिति के साथ 1px गोलाई त्रुटि है, इसलिए आप चाहते हैं कि कंटेनर पिक्सेल की एक समान संख्या हो, लेकिन यह बहुत साफ है।

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

सीएसएस:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

छवि सिर्फ 18px चौड़ी है और सभी 4 कोनों को एक साथ पैक किया गया है। एक चक्र की तरह दिखता है।

नोट: आपको दूसरे आंतरिक आवरण की आवश्यकता नहीं है, लेकिन मुझे आंतरिक आवरण पर मार्जिन का उपयोग करना पसंद है ताकि पैराग्राफ और शीर्षकों पर मार्जिन अभी भी मार्जिन पतन बनाए रखें। आप jquery को भी छोड़ सकते हैं और HTML में केवल आंतरिक आवरण डाल सकते हैं।

Answer 13

इस बात के संकेत के रूप में कि गोल कोनों को काम करना कितना जटिल है, यहां तक ​​कि याहू उन्हें हतोत्साहित करता है (पहले बुलेटेड पॉइंट देखें)! दी, वे उस लेख में केवल 1 पिक्सेल गोल कोनों के बारे में बात कर रहे हैं, लेकिन यह देखना दिलचस्प है कि यहां तक ​​कि उनकी विशेषज्ञता वाली एक कंपनी ने निष्कर्ष निकाला है कि उन्हें ज्यादातर समय काम करने के लिए बस बहुत दर्द हो रहा है ।

यदि आपका डिजाइन उनके बिना जीवित रह सकता है, तो यह सबसे आसान उपाय है।

Comments

मैं उस YUI पृष्ठ का हिस्सा ढूंढना चाहता हूं जिसके बारे में आप बात कर रहे हैं, लेकिन मैंने जो भी बुलेट पॉइंट्स देखे हैं, उनमें से कोई भी यह नहीं कहता है कि गोल कोनों को पाने की कोशिश करना एक बुरा विचार है। क्या आप अधिक विशिष्ट हो सकते हैं? मुझे एक हिस्सा मिला, जो चर्चा करता है कि गोल कोनों का उपयोग करते समय आपको अपनी चौड़ाई अलग-अलग कैसे सेट करनी है, लेकिन यह हतोत्साहित नहीं करता है।

— एलोयूरकोड

@allyourcode - मैं इसे अब और नहीं देखता। मुझे याद है कि मैं इस पद को बना रहा हूं, लेकिन जैसा उन्होंने कहा था वैसा नहीं है। हालाँकि ऐसा लगता है कि ऊपर के दूसरे लिंक में वे 1px गोल कोनों के लिए IE समर्थन को हटाने का उल्लेख करते हैं। लेकिन किसी भी तरह यह पोस्ट गाल में थोड़ी सी जीभ थी क्योंकि वे केवल 1px कोनों के बारे में बात कर रहे थे जो मुझे लगता है कि समय की जबरदस्त बर्बादी है! मुझे याद है उस समय जब मैंने लिखा था कि यह गोल कोनों के साथ सामान्य रूप से निराश होता है, और कोने की छवियों पर बसा हुआ है

— सिमोन_विवर

Answer 14

यकीन है, अगर यह एक निश्चित चौड़ाई है, तो यह सीएसएस का उपयोग करके सुपर आसान है, और सभी आक्रामक या श्रमसाध्य नहीं है। यह तब होता है जब आपको दोनों दिशाओं में पैमाने की आवश्यकता होती है कि चीजें तड़का जाए। कुछ समाधानों में ऐसा करने के लिए एक दूसरे के ऊपर ढेर किए गए विभाजनों की एक चौंका देने वाली मात्रा होती है।

मेरा समाधान डिजाइनर को निर्देशित करना है कि यदि वे गोल कोनों का उपयोग करना चाहते हैं (समय के लिए), तो इसे एक निश्चित चौड़ाई की आवश्यकता है। डिजाइनर गोल कोनों को पसंद करते हैं (इसलिए मैं करता हूं), इसलिए मुझे यह एक उचित समझौता लगता है।

Answer 15

रूजी बॉर्डर एकमात्र जावास्क्रिप्ट-आधारित एंटी- अलियास राउंडेड कॉर्नर सॉल्यूशन है जो मैंने पाया है कि सभी प्रमुख ब्राउज़रों में काम करता है (फ़ायरफ़ॉक्स 2/3, क्रोम, सफारी 3, IE6 / 7/8), और ALSO केवल एक ही है दोनों गोल तत्व और मूल तत्व में पृष्ठभूमि छवि होती है। यह बॉर्डर, परछाई और चमक भी करता है।

नया RUZEE.ShadedBorder एक अन्य विकल्प है, लेकिन इसमें CSS से शैली की जानकारी प्राप्त करने के लिए समर्थन का अभाव है।

Answer 16

यदि आप सीमा-त्रिज्या समाधान के साथ जाने वाले हैं, तो सीएसएस उत्पन्न करने के लिए यह भयानक वेबसाइट है जो इसे सफारी / क्रोम / एफएफ के लिए काम करेगी।

वैसे भी, मुझे लगता है कि आपका डिज़ाइन गोल कोने पर निर्भर नहीं होना चाहिए, और यदि आप ट्विटर पर देखते हैं, तो वे IE और ओपेरा उपयोगकर्ताओं को F **** कहते हैं। गोल कोने एक अच्छा है, और मैं व्यक्तिगत रूप से उन कूल उपयोगकर्ताओं के लिए इसे रख रहा हूं जो IE :) का उपयोग नहीं करते हैं।

अब निश्चित रूप से यह ग्राहकों की राय नहीं है। यहाँ लिंक है: http://border-radius.com/

Answer 17

ऊपर उल्लिखित htc समाधानों के अलावा, IE में गोल कोनों तक पहुंचने के लिए यहां एक और समाधान और उदाहरण दिए गए हैं ।

Answer 18

कोई "सबसे अच्छा" तरीका नहीं है; ऐसे तरीके हैं जो आपके लिए काम करते हैं और ऐसे तरीके जो नहीं करते हैं। यह कहने के बाद, मैंने CSS + Image आधारित, द्रव राउंड कॉर्नर तकनीक बनाने के बारे में एक लेख पोस्ट किया है:

सीएसएस और छवियों का उपयोग करके गोल कोनों के साथ बॉक्स - भाग 2

इस ट्रिक का एक अवलोकन यह है कि इसमें नेस्टेड डीआईवी और बैकग्राउंड इमेज रिपीटेशन और पोजिशनिंग का उपयोग किया गया है। निश्चित चौड़ाई के लेआउट के लिए (निश्चित चौड़ाई की ऊँचाई पर), आपको तीन DIV और तीन छवियों की आवश्यकता होगी। एक द्रव चौड़ाई लेआउट (फैलाव चौड़ाई और ऊंचाई) के लिए आपको नौ DIV और नौ छवियों की आवश्यकता होगी। कुछ इसे बहुत जटिल मान सकते हैं लेकिन IMHO इसका अब तक का सबसे साफ समाधान है। कोई हैक नहीं, कोई जावास्क्रिप्ट नहीं।

Answer 19

मैंने कुछ समय पहले इस पर एक ब्लॉग लेख लिखा था, इसलिए अधिक जानकारी के लिए, यहां देखें

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

यह काफी अच्छी तरह से काम करता है। कोई जावास्क्रिप्ट की जरूरत है, बस सीएसएस और HTML। अन्य सामानों के साथ न्यूनतम HTML हस्तक्षेप के साथ। यह मोनो के पोस्ट के समान है, लेकिन इसमें कोई IE 6 विशिष्ट हैक शामिल नहीं हैं, और जाँच के बाद, यह बिल्कुल भी काम नहीं करता है। इसके अलावा, एक और चाल यह है कि प्रत्येक कोने की छवि के अंदरूनी हिस्से को पारदर्शी बनाया जाए ताकि यह पाठ को कोने के पास ब्लॉक न करे। बाहरी भाग पारदर्शी नहीं होना चाहिए ताकि यह बिना गोलाकार डिव की सीमा को कवर कर सके।

इसके अलावा, एक बार CSS3 को सीमा-त्रिज्या के साथ व्यापक रूप से समर्थन किया जाता है, जो कि गोल कोनों को बनाने का आधिकारिक सबसे अच्छा तरीका होगा।

Answer 20

CSS का उपयोग न करें, jQuery का उल्लेख कई बार किया गया है। यदि आपको अपने तत्वों की पृष्ठभूमि और सीमा पर पूर्ण नियंत्रण की आवश्यकता है, तो jQuery पृष्ठभूमि कैनवास प्लगिन को आज़माएं। यह एक HTML5 कैनवास तत्व को पृष्ठभूमि में रखता है और यो को आपकी इच्छित प्रत्येक पृष्ठभूमि या सीमा को खींचने की अनुमति देता है। गोल कोनों, ढाल और इतने पर।

Answer 21

ओपेरा अभी तक सीमा-त्रिज्या का समर्थन नहीं करता है (जाहिर है कि यह संस्करण 10 के बाद रिलीज में होगा)। इस बीच, आप एक समान प्रभाव बनाने के लिए SVG पृष्ठभूमि सेट करने के लिए CSS का उपयोग कर सकते हैं ।