Have you ever thought, “man, a photo with rounded edges would look really good on this page, but I don’t know how to use Photoshop or Illustrator”? Well, my friend, I’m here to help! You can use HTML or CSS to take a photo from regular ol’ square edges, to any type of rounded edge that tickles your fancy – *without* using a photo editor. So let’s start with this photo of my dog Lady (wearing an octopus on her head).
Now let’s say I want to use this photo for a testimonial, but I want to spruce it up a bit. I want the photo to have rounded edges!
All I have to do is harness the power of the border-radius property.
Find the < img > tag in your HTML/Text editor and add the following: style=”border-radius: 15px;”. Voila – you will get this:
To be clear, the full tag for the image above is:
Now, let’s say I want the photo to be more circlular. Simple – I just need to increase the px for the border-radius.
The image below is using: style=”border-radius: 150px;”:
Now that we’ve come full circle (puns), what if we want to get a bit crazy with our border-radius? We can! We can have up to four px values to create varying levels of rounded edges. Here’s how that breaks down:
style=”border-radius: 5px 6px 7px 8px;”
5px is the top left corner.
6px is the top right.
7px is the lower right, and 8px is the lower left.
For the image below, I only used 2 px values: style=”border-radius: 20px 65px;”
The 20px represents the top left and lower right corners. The 65px is for the top right and lower left.
Using CSS Class
Using border-radius for HTML is easy. Let’s say, though, that you want to use the same circular shape for all testimonials on your site. While you could apply the same style tag to every photo, it would be easier to create a CSS class for this specific border-radius. For example, if I wanted all of my photos of Lady to be circular, this is the CSS class I would put in my site’s stylesheet:
This means that any time there is an < img > tag, and I assign a class=”circle”, the border-radius will be applied to that image. Example below:
The code for each image:
There you have it! Please let me know if you have any questions or issues in the comment box below!
CSS for Web Designers
Learn more about my upcoming CSS for Web Designers course, and get useful tools + tutorials to make you a better web designer.