CSS border-radius प्रॉपर्टी का उपयोग करके बटन (या किसी भी तत्व) के कोनों को गोल बनाया जा सकता है। यह बटन को आधुनिक और आकर्षक रूप देता है।
उदाहरण
नीचे दिए गए उदाहरण में, बटन पर border-radius: 15px लागू करके गोल कोने बनाए गए हैं।
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: yellow;
color: black;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>Result</h2>
<p>Click below for result:</p>
<button class="button">Result</button>
</body>
</html>
border-radius के मान:
pxमान: निश्चित गोलाई (जैसे15px)%मान: सापेक्ष गोलाई (जैसे50%से गोला)- चार मान:
border-radius: 10px 20px 30px 40px(प्रत्येक कोने के लिए अलग)
नोट: <button> एलिमेंट पर सीधे भी लागू कर सकते हैं, लेकिन क्लास का उपयोग करना बेहतर अभ्यास है।