Adapt or suffer forever A big change in slicing these days is definatly the way we deal with rounded corners. Since CSS3 introduced the border-radius property, any block element (p, h1-h6, a, div, …) can be rounded down. Take a look at a recent project we’ve done at Belgacom. http://www.mijnbelgacomtvfilms.be/ How we did this? Not too complicated though … we need basic HTML, CSS and jQuery to make it all cross-browser compatible. Forget about background-images! Don’t even think about adding an extra div for top and bottom. It is getting old and we need to get rid of it right now.

Set up the HTML The navigation layer is a nice example of how we keep things simple, yet achieve a good result with rounded corners in the links and on the navigation panel.

In the index.html

Set up the CSS Note the class “.round10″ here since this is our magic one. The prefixes are used to target several browsers. Because not every browser supports “border-radius”, we need to make sure that we can target as many browsers possible with CSS. So some browsers chose to support it with their own prefix, while waiting for the standard to be approved. In the meantime we target these several browser-supports differently.

  • -moz-border-radius (Mozilla aka FireFox)
  • -webkit-border-radius (Safari, Chrome, Opera)
  • -khtml-border-radius (Konqueror)
  • -o-border-radius (Opera)

The -o- prefix might be obsolete but know it excists.

.round10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
.shadow {-moz-box-shadow: 1px 1px 3px #999999; -webkit-box-shadow: 1px 1px 3px #999999; box-shadow: 1px 1px 3px #999999;}
/* navigation */
#navigation {background-color: #000000; clear: both; display: inline-block; list-style-type: none; margin: 0; padding: 5px; width: 770px;}
#navigation li {display: block;float: left;}
#navigation li a:link, #navigation li a:visited {background-color: #67B4CF; color: #FFFFFF; display: block; float: left; font: bold 14px/120% 'Orbitron',arial,serif; margin: 0 2px; padding: 5px 15px; text-decoration: none; text-shadow: -1px -1px 0 #000000; -moz-box-shadow: 0 0 3px 0 #FFFFFF; -webkit-box-shadow: 0px 0px 3px #FFFFFF; box-shadow: 0px 0px 3px #FFFFFF;}
#navigation li a:active, #navigation li a:hover {background-color: #87CEEB;}

In the default.css

Cross-browser solution with jQuery This script works perfectly for rounding down block elements. It will calculate the necessary amount of pixels and background-color and append it to our DOM.

<head>
...
    <script type="text/javascript" src="design/js/scripts.js"></script>
    <script type="text/javascript" src="design/js/functions.js"></script>
    <script type="text/javascript" src="design/js/jquery.corner.js"></script>
    <link type="text/css" href="design/css/default.css" rel="stylesheet" />
...
</head>

In the index.html

If you keep all corners at the same pixel radius, you can target the classes in jQuery and the script will do most of the work. Else I advice to play with it a little bit. I’ll post a more advanced way later on.

//Once the DOM is ready
$(function(){
    $(".round10").corner("10px");
});

In the scripts.js

Conclusion The benefit of slicing like this is huge. Since you don’t need to cut background-images anymore, you’ll be saving tremendous amounts of time. Also your code will be a lot cleaner. Less spacer layers for the backgrounds and the option of choice. Choice in this matter of supporting old browsers or let it all degrade nicefully. If you go down the road of cross-browser support, the easier your corners are, the better the result.