How to make rounded images with CSS

Have you ever wondered or thought that how those circular images is can automatically build without choosing any feature or application. Today we are going to tell you how can you make this feature active in your website by using CSS.

You can also do this with using simple CSS and HTML.

To active this code first starts with making simple div class:

<divclass="img-circular"></div>

Click to expand...

After making div classes make a simple class for img-circular

.img-circular{
width:200px;
height:200px;
background-image: url('http://your-domain-name.com/image-name.jpg');
background-size: cover;
display: block;
}

Click to expand...

Basically you did not seen or use line number five. It’s a new property of CSS3. Its used as background-size property. It will use to enables the dimension of background. After using this code You can set height, width with using percentage, pixel values and background cover so it can fit this into whole container. Always be sure that you can easily see the info of documentation of background-size .

How to make things round:

So let’s start with selecting an image which you want to fit in our container. Let’s start the CSS code of making a circular frame for rounded images. To make these circular frames we can use property of CSS called “border radius property”. It will give you the facility of making corners round. To make your image round or circular you can use these values. These values are completely half of your original image size. Here is the code to do that work.

.img-circular{
width:200px;
height:200px;
background-image: url('http://your-domain-name.com/image-name.jpg');
background-size: cover;
display: block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

Click to expand...

After applying these codes the new properties of CSS will automatically allow you to create new effects in your rounded image and now you don’t have to use Photoshop property for all these works.