बॉर्डर रेडियस

एक वर्गाकार एलिमेंट पर border-radius: 50% लगाएँ ताकि एक पूर्ण वृत्त बने। चारों कोनों को 50% पर सेट करें।

हाँ, border-radius में चार अलग-अलग मान इस क्रम में हो सकते हैं: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, नीचे-बाएँ। यह अनूठे असममित आकार बनाने देता है।

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

50% का अर्थ है "हर भुजा का आधा", इसलिए जब तक तत्व वर्गाकार न हो, क्षैतिज और ऊर्ध्वाधर त्रिज्याएँ अलग रहती हैं और अंडाकार बन जाता है। सच्चा वृत्त चाहिए तो width और height एक ही मान पर रखें या aspect-ratio: 1 जोड़ दें। अगर बटन जैसी चीज़ को कैप्सूल आकार देना हो, जिसकी चौड़ाई उसके पाठ से तय होती है, तो 50% के बजाय 9999px जैसा बड़ा स्थिर मान दें — तब सिरे हर ऊँचाई पर पूरे अर्धवृत्त बने रहेंगे।