Join Sue Jenkins for an in-depth discussion in this video Rounding square images using CSS, part of Productivity Tips for Web Designers.
- Hi, everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll show you how you can use the border-radius CSS property to make your square and rectangular images appear round in a browser. If you've ever needed an image for your website with curved edges, like rounded rectangles and circles, chances are you've probably created the image by optimizing your desired shape inside the rectangle on a transparent or solid background.
Creating images like this often takes extra time because you need to crop and size each special image to the desired shape one at a time and then optimize them. If you'd like to save time, however, try using the CSS3 border-radius property. The border-radius property allows you to add a curved corner to any element, including <div> tags and images. You can apply the border-radius to any or all of the four corners of your element, that's the top, the right, the bottom, and the left, and the curve measurement can be set to any length or any percentage, such as 10 pixels, 50%, 99, or 1em.
In most cases, the larger the value, the bigger the curve. The quickest way to make your rectangular image circular is to create a class style in your CSS and then apply the style directly to your image. In this example, we have a class style called .roundimage with a border-radius set to 99em. Then, in the HTML, in the <image> tag, we've added the class="roundimage".
Here's a sample page in Dreamweaver with the same exact code. When we click the Live view button, we can see how the code rounds the image. When you add the border radius to your CSS, if you specify a single value, it will be applied to all four corners of your object, as in border-radius: 5px; You can also specify all four corner values individually, Like border radius: 5px 10px 5px 10px, which correspond to the top left, top right, bottom right, and bottom left corners respectively.
As a visual person, probably the best way to understand how border-radius works is to see it in action and then look at the code. One of my favorite tools is the border radius generator on the CSSmatic website. As you play around with the widgets on this site, you can see instantly how each corner's radius alters the rectangle's shape. Using the border-radius property to create round images is a great technique for web pictures like team photos, products, or even featured items.
Okay, so there you have it, no more making round .pngs and .jpgs. Instead, round off your image corners with the border-radius CSS.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.