Every image I include on my Web page has sharp 90-degree corners. It’s boring. I want to have subtle rounded edges on certain images, but don’t want to do that by hand. Is there a way in HTML or CSS for me to round the edges of my photos or images?
The first generation of Web pages were definitely characterized by rectilinear imagery. Everything was squares or rectangles and if you wanted a rounded edge, you had to chop up your image into elements or add the rounded edge within a graphics editor before you uploaded the photo or graphic to your Web server.
So tedious!
Modern Cascading Style Sheets (CSS) has you covered with some of its newest tricks and features. The key style attribute for this task is border-radius and it can take on a number of different settings, either sizes or percentages. It’s darn cool!
To start, let’s just grab a sunset photo out of my own image gallery archive. Here it is, in all its 1000 x 500 rectangular glory:
Definitely a pretty picture, but those edges!
Now let’s take that same HTML but add a CSS attribute with border-radius. This is the new HTML code for the image:
<img src="landscape.jpg" width="1000" height="500"
style="border-radius:25px;" />
The result is rather attractive:
But turns out you can go kinda crazy with these border radius settings and get some pretty interesting results. For example, instead of 25 pixels, how about 75% radius? Sure, it’ll chop out a fair bit of the corners of the image, but check this out:
You can learn about all the nuances of border-radius if you’re curious: border-radius specs.
While we’re here, let’s look at drop shadows, because that’s another thing you can add with CSS. You need to tap into the power of an attribute called box-shadow. It’s a bit more tricky to work with because you specify the horizontal and vertical offset, a blur value, a spread value, and a color. Or some subset thereof, as is often used instead.
Let’s just look at an example. I’ll shrink down the image a bit too, but this is going to use just a horizontal and vertical offset value:
<img src="landscape.jpg" width="500" height="250"
style="box-shadow:10px 10px;border-radius:25px;" />
And the result:
Pretty interesting, if a bit stark.
To fix is, let’s apply a blur value of 10px and a color of #999 (grey):
That’s quite striking, isn’t it?
The fact that the drop shadow is smart enough to match the border radius modification means we can do things like this too:
That’s a box-shadow of 10px 10px 25px #444 and a border-radius of 80%.
All of this is pretty darn handy to know, and now you can also move these border-radius and box-shadow settings into a CSS class and use them across dozens or hundreds of images too.
Pro Tip: I’ve been writing about HTML and CSS for years. I even wrote some books on the subject! I have a lot of tutorials on the subject, so please check out my CSS & HTML help areas while you’re here.
This is really a nice information you have shared Dave. Such kind of tutorials are very much helpful for beginner programmer and CSS developers to enhance knowledge.