How to make rounded image with CSS
|
11:37 |
No Comments |
In this tutorial , we will learn that how to make rounded image using CSS.
This example is done by using border-radius property. In CSS, border-radius property is used to draw round corner of the element. This method is currently supported in mostly all browsers.
border-radius property will 50% then border of an element will shaped in circle.
To make an image round, simply use the below code :
File : index.html
Output :
Click Here for View Demo :
Live Demo
This example is done by using border-radius property. In CSS, border-radius property is used to draw round corner of the element. This method is currently supported in mostly all browsers.
border-radius property will 50% then border of an element will shaped in circle.
1 2 3 4 | .circular-img { border-radius:50%; } |
To make an image round, simply use the below code :
File : index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <head> <style> .circular-img { display:inline-block; padding:10px; border-radius:50%; background:black; height:120px; width:120px; } .circular-img img { display:inline-block; margin-top:5px; margin-left:10px } </style> </head> <body> <div class="circular-img"> <img src="img/06.png"> </div> </body> </html> |
Output :
Click Here for View Demo :
Live Demo