Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • HTML & Web Page Design
  • How Can I Round My Image and Graphics Corners in CSS?

How Can I Round My Image and Graphics Corners in CSS?

September 9, 2019 / Dave Taylor / HTML & Web Page Design / 2 Comments

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:

sunset over the rockies - landscape mountains clouds

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:

sunset over the rockies - landscape mountains clouds

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:

sunset over the rockies - landscape mountains clouds

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:

sunset over the rockies - landscape mountains clouds

Pretty interesting, if a bit stark.

To fix is, let’s apply a blur value of 10px and a color of #999 (grey):

sunset over the rockies - landscape mountains clouds

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:

sunset over the rockies - landscape mountains clouds

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.

About the Author: Dave Taylor has been involved with the online world since the early days of the Internet. Author of over 20 technical books, he runs the popular AskDaveTaylor.com tech help site. You can also find his gadget reviews on YouTube and chat with him on Twitter as @DaveTaylor.

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!
css design, css style, css tricks, drop shadow, html coding, rounded corners, rounded edges, web design

2 comments on “How Can I Round My Image and Graphics Corners in CSS?”

  1. John L Beiswenger says:
    April 22, 2021 at 11:47 am

    Thank you. You are one of those guys with simple answers.

    Reply
  2. Jhon says:
    May 21, 2020 at 2:50 am

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • Create a Google Image Search Box for Photos of the Coronation?
  • Does the Android WiFi “Settings” Show Network Speed?
  • How to Update the Plugins on a WordPress Site
  • How to Write Someone a Recommendation on LinkedIn
  • How Can I Stop “Feedback Hub” Notifications on my PC?

On Our YouTube Channel

EKSA Telecom H16 Pro Wireless Headset -- DEMO & REVIEW

Speakerphones: ANKER PowerConf S500 vs. EMEET OfficeCore M3 -- DEMO & REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Amazon, eBay, and Online Shopping Help (166)
  • Android Help (234)
  • Apple iPad Help (150)
  • Apple Watch Help (53)
  • Articles, Tutorials, and Reviews (346)
  • Auto Tech Help (19)
  • Business Advice (200)
  • ChromeOS Help (37)
  • Computer & Internet Basics (788)
  • d) None of the Above (166)
  • Facebook Help (384)
  • Google, Chrome & Gmail Help (190)
  • HTML & Web Page Design (248)
  • Instagram Help (49)
  • iPhone & iOS Help (629)
  • iPod & MP3 Player Help (173)
  • Kindle & Nook Help (100)
  • LinkedIn Help (90)
  • Linux Help (178)
  • Linux Shell Script Programming (90)
  • Mac & MacOS Help (918)
  • Most Popular (16)
  • Outlook & Office 365 Help (35)
  • PayPal Help (68)
  • Pinterest Help (54)
  • Reddit Help (20)
  • SEO & Marketing (82)
  • Spam, Scams & Security (98)
  • Trade Show News & Updates (23)
  • Twitter Help (223)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (961)
  • Wordpress Help (206)
  • Writing and Publishing (72)
  • YouTube Help (47)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (64)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2023 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy