CSS border-radius से गोल कोनों वाली इमेज बनाएं

CSS border-radius प्रॉपर्टी का उपयोग करके इमेज के कोनों को गोल (rounded) बनाया जा सकता है। मान जितना बड़ा होगा, कोने उतने ही अधिक गोल होंगे।

उदाहरण

नीचे दिए गए उदाहरण में, इमेज पर border-radius: 20px लागू करके कोनों को गोल किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      border-radius: 20px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <h2>Coding Ground</h2>
  <img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>

टिप्स:

• border-radius: 50% से पूरी तरह गोल (सर्कुलर) इमेज बनती है
• अलग-अलग कोनों के लिए: border-radius: 10px 20px 30px 40px (टॉप-लेफ्ट, टॉप-राइट, बॉटम-राइट, बॉटम-लेफ्ट)
• border प्रॉपर्टी के साथ संयोजन करके बॉर्डर भी गोल हो जाएगा