Thursday, February 1, 2018

How To Make Circle and Square Images Using CSS

In this tutorial we are going to explain How To Make Circle and Square Images Using CSS in your HTML Pages. To create Circle and Square images, all you need is some basic idea on CSS stylesheet. By this way you can provide better look and feel to your images in HTML.

how to make image circle using css, how to make an image circle using css, how to make circle images in css, how to make image in circle using css, how to make circle image with css


lets get started and check out the below simple examples:

How to Create Circular Images With CSS

Here we have used CSS design to make circular design with help of border-radius property and set border radius to 50%.
<html>
<head>
<style>
.img-circle {
    border-radius: 50%;
 width:110px;
 height:110px;
}

</style>
</head>
<body>
<img class="img-circle" src="img1.jpg" />
<img class="img-circle" src="img2.jpg" />
<img class="img-circle" src="img3.jpg" />
<img class="img-circle" src="img4.jpg" />


</body>
</html>



How to Create Square Images With CSS

Here we have used CSS design to make square design with help of border-radius property and set border radius to 10%.
<html>
<head>
<style>
.img-square {
    border-radius: 10%;
 width:110px;
 height:110px;
}
</style>
</head>
<body>

<img class="img-square" src="img1.jpg" />
<img class="img-square" src="img2.jpg" />
<img class="img-square" src="img3.jpg" />
<img class="img-square" src="img4.jpg" />
</body>
</html>


This is all about Circle and Square Images design Using CSS. Let me know your queries in comment section below.

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Make%20Circle%20and%20Square%20Images%20Using%20CSS



No comments:

Post a Comment