Web Development
Rounded Corners With or Without Images
October 19, 2010 Often the websites I build for clients include rounded corners in the design. The border-radius property introduced by CSS3 and supported by most browsers except IE6-8, makes it easy to implement rounded corners.
Reprinted from http://professionaldilettante.com with permission from Zach Hannes
For those of you who just want to see the code: Rounded corners with background-images and Rounded corners using border-radius . The code below is somewhat pseudo code. The working demo code is here.
Before CSS3
Often the websites I build for clients include rounded corners in the design. Prior to CSS3, creating rounded corners ( without JavaScript ) in any browser required creating and slicing up images to be used with html elements and the css property, background-image. How many images need to be cut? How many elements do we need in our HTML mark-up to properly display the background-image? Other than background-image, what CSS properties are required to display the background-images? Those answers depends on whether you require the content to be able to expand and contract, or whether the height and width are fixed.
E.g., Rounded corners for the chrome of a webpage might need three background images and three HTML divs – div#top, div#center (repeating vertically), and div#bottom. Repeating the center background image allows for content of varying length. If you have a fixed height and width then you can cut a single background-image.
To boot, IE6 does not include native support for PNG images. So if your rounded corners required transparency, you needed separate background images and CSS rules to specify GIFs for IE6 and PNGs for IE7+ and other browsers. In order to apply rules specifically to IE6, you need detect the browser on the server side, use Microsoft proprietary conditional comments for Internet Explorer, or javascript. Alternatively, you can use the proprietary Microsoft filtering code to add support for transparent PNGs in IE6. Either way it requires adding browser specific CSS, which is generally undesirable but sometimes unavoidable. Below is an example of adding the conditional wrapper div for IE6, which is used primarily for targeting your CSS as well as using different background images between IE6 and > IE6. Also shown is the conditional div for generating the additional markup required for the background images.
Rounded Corners with background-images
Your CSS for IE browsers would be something like:
And that’s just the CSS for IE! You might need something different to get rounded corners with background-images working in Firefox, Safari, Chrome, and Opera.
Rounded Corners using CSS3 border-radius
To the rescue came the CSS3 property, border-radius. Border-radius allowed web developers and designers to easily create rounded corners simply by declaring the “border-radius:” property and specifying a value. *The property to be declared actually depends on your browser, and I will get into that later when I show you the code. Currently, the CSS3 border-radius property is supported by recent versions of major browsers such as Firefox (Gecko), Safari (Webkit), Google Chrome (Webkit), and Opera (Presto). However, Internet Explorer versions 6-8 do not support border-radius. For me, the decision on whether to support IE at all, and if so which versions, depends on the project.
Using the border-radius property gives us rounded corners in almost all the popular browsers, while requiring less html mark-up and fewer CSS rules. If you need to support Internet Explorer, you can use the border-radius approach in combination with background-images. Working demo here.
Categories
Contributors
- Allie Dennis
- Alec Francesconi
- Andrew Harper
- Al Lemieux
- Anthony Sorrentino
- Benjamin Greenspan
- Bob Quinn
- Brian Tetrault
- Brea Thomas
- Ben & Vince Schaefer
- Chris Alvanas
- Carlo Libertini
- Christopher O'Coin
- Corey Schreppel
- Christine Stavrou
- Dan Cardinal
- Dawn Deeks
- Daniel Goldfine
- Emily Clack
- Federico Muchnik
- Gene Babon
- Gregory Croteau
- Graeme Hall
- Gabe Herman
- Howard Kaplan
- Howard Phillips
- John Corbett
- Jono Forbes
- Joel McNamee
- James Murphy
- Jeanne Shapiro
- Kathryn Mora
- Kelly Perrault
- Ketsia Vedrine
- Lara Callahan
- Lucie Wicker
- Maureen Lawson
- Nicole Bedard
- Peter Eastwood
- Peter Kery
- Philip Percuoco
- Practicum Program
- Randall Armor
- Riordan Galluccio
- Ryan LaPerle
- Rich Volin
- Stephanie Bragg
- Scott Defusco
- Stacy Kadesch
- Special Guests
- Shawn Read
- Sarah Viera
- Tom O'Brien
- William Lee
- Zach Hannes
- Zack Holmes
Community Forums
- Portfolio Day 0 comment(s)
- Photography Showcase, May 30 0 comment(s)
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- September 2006
- August 2006
- July 2006
- June 2006
Outstanding post! I’ve bookmark this site to return later. thanks!
Great articles & Nice a site….
Its helpful article. Congratulations.
Thanks for creating this. I really feel as though I know so much more about the topic than I did before. You should continue this, Im sure most people would agree youve got a gift.
This type of wonderful article! Thank you very much for discussing this blog post!
its superb as your other content : D, appreciate it for putting up.
This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.
Hm, I am ok with this nevertheless not totally certain, therefore i am gonna research a tad bit more.
Thank you for sharing these nice news with us.
That may seem fine but i am just still not so sure that I like it. Anyhow will look even more into it and decide for myself!
O . k ., what a good start but i’m going to look into that a little bit more. Will let you know exactly what else there is.
This page appears to recieve a great deal of visitors. How do you get traffic to it? It gives a nice unique spin on things. I guess having something real or substantial to say is the most important thing.
I got what you mean , thanks for posting .
Great Post. You do a good job. Thanks again
My husband and i have been absolutely lucky when Ervin managed to do his reports from your precious recommendations he received out of the site. It is now and again perplexing just to find yourself giving away tips and hints some others could have been making money from. And now we discover we have you to be grateful to for this. Most of the illustrations you have made, the easy web site menu, the relationships you assist to instill – it’s all amazing, and it’s really assisting our son and our family reckon that that concept is pleasurable, which is rather essential. Thank you for the whole thing!
I and my buddies appeared to be checking the excellent suggestions on your web page and all of a sudden got a terrible feeling I never thanked you for those tips. The young men are actually so very interested to read all of them and already have certainly been using those things. Many thanks for indeed being quite helpful as well as for getting some useful areas most people are really desirous to be informed on. My personal honest regret for not expressing appreciation to you earlier.