Circular borders for all images using CSS trick

Circular borders for all images using CSS trick

Circular borders in images is the latest trend among web developers. Circular borders in web images give a stylish look. That makes the website yet more presentable and fashionable.

Well, our topic of discussion in this article is how we can make circular borders for all images in a website at once. That too, using one small CSS trick.

There are, however, some very important things to remember while using this trick. We’ll see all of it. Let’s dive into it straight, without further delay. Just follow the steps and everything will be just fine.

Tip 1: Use a universal style sheet for all your webpages

This one’s really important. You see, nowadays, major number of websites already use this pattern of coding. They usually have one main CSS file and handle all HTML components from that file itself.

This is where CSS selectors come into picture. But, all HTML files connect with that one CSS file. Only in some extreme and special cases, the approach might be different.

So, here in our case, we are pointing out this to be so important because all images can have circular borders at once; only when all images are pulling the style command from the same file.

It’s bad coding to write the same style commands for multiple HTML elements or in multiple places. CSS selectors are used instead by web designers. So, we will declare this small CSS trick only in one place and that will apply to all images on the website.

Tip 2: Declaring the style trick for circular borders, but for all images

By this heading we mean, that, in this article we need circular borders for all images. So, our styling will target all images at once. That is one part of the trick.

The other part of the trick is to put a “border-radius” attribute with a very high radius for all corners. Yes, that’s what our trick is!

Confused? Well, here’s the concept. When you apply a very high radius for the border of an image, it starts rounding the corners and keeps on continuing till a limited curve. Beyond that, the thing just gets saturated and becomes one-fourth of a circle.

Viola! That’s what we wanted. This is a pure CSS trick, and you should know the basics of CSS in order to understand.

Here’s an example code for applying to all images –

/* 
Considering that the biggest image in your website is 300px X 300px 
The below code will make all images round.   
*/
img{
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
}
<!-- All below images will automatically have round corners using the above CSS -->
<ul>
<li>
<img src="C:\Users\Kaustav\Pictures\ronaldo.jpg" height="300" width="300" />
</li>
<li>
<img src="C:\Users\Kaustav\Pictures\ronaldo.jpg" height="200" width="200" />
</li>
<li>
<img src="C:\Users\Kaustav\Pictures\ronaldo.jpg" height="100" width="100" />
</li>
</ul>

By rounding all the corners to a very high value, we actually create a circle.

circular borders for all images using CSS trick

Tip 3: For circular borders, your websites images must all be in square format

This thing is really very important. All your images must have their height equal to their width. The images may individually differ in size one from the other. But their height and width combination must be that like a square.

If you miss this, the trick won’t work. It will look more like an ellipse.

Tip 4: Border radius supplied must be at least exact half of the image dimension or more

This is the most important tip. Your images may be very huge in dimension; that does not matter. But, in order for the border radius to form circular borders, the border radius measurement must be exactly half of the image height or width (or more than that).

In fact, this technique works on very high dimension images too. By high dimension, I do not mean HD or high quality. The width and height combination may be very big, but the radius must be accordingly very high.

So, we need to understand one more thing here.

If you are planning to apply this circular borders to all your images at once, you must have the following calculation –

  • Figure out the dimension of the biggest image in your website.
  • Supply border radius equal to half or more of that dimension.

So, here’s an example. If you have three images in your website of (width X height) 100 X 100, 200 X 200 and 300 X 300. Then, just set the border radius for all images to 150. In that way, all your 3 images will have circular borders.

Try this and do let me know how it worked out for you.

Comments are closed.