For the (better) browsers…

It’s easy to add corners to your design in most browsers. In a previous post, I talked about the different ways to apply CSS corners within your design. Here’s what I used for this particular client.

.corners {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
.noTL {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
}
.noTR {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
}
.noBL {
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
}
.noBR {
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
}

This made it extremely easy to add corners to the elements in my design. In most cases, I could simply add <div class="myDivClass corners"/>, and the CSS does the rest. If I don’t want a rounded edge on a particular corner, I can just add noTR, noBL, etc. to my class list. Easy.

For the other (not-so-better) browser…

Disclaimer: this really doesn’t do anything entirely too amazing. It’s not auto-magically generating corner images, and it’s not inserting a ton of HTML to simulate corner images (I just hate when scripts do that). This is a script I have been using for a while to add corners for IE users; basically, it builds a custom image path for each style of widget in your design marked with the corners CSS class. For each corners widget that my script finds, it will trace up through your HTML until it finds a parent element with a background-color. It then creates four <div/> tags inside your widget and positions them at the outer corners of the widget. The background-image for these <div/> tags is set to something like corners-12-ffffff.png or corners-12-ffaa10-border (if your widget has a border-width associated with it). The 12 is the radius of your corner, and ffffff is the background color that appears behind your widget. You’ll have to create the images yourself (and put them in the right place), but my script will handle inserting the HTML and CSS in the right place. If you create the images a little like this, then you’ll find that your IE corners will be in place in no time at all.

It’s certainly not ground-breaking stuff, but it makes it very easy to reduce the overhead in your design for most users. In addition, the script is fairly small, and you’ll find it’s really not much overhead for IE users as well. Here’s how to add it to your site:

1. You’ll need jQuery 1.3.2 or later linked to your page
2. Add the CSS (above) to your style sheet. This takes care of everyone except for IE.
3. Create a new JavaScript file with the following contents:

   /*******************************************
   
   	IE Corner Inserts v1.0
   
   	by Kyle Schaeffer
   
   http://www.kyleschaeffer.com
   
   	* requires jQuery 1.3.2 or later
   
   *******************************************/
   
   // change this path to match the path to your corner image files
   var cornerImagePathPrefix = '/designImages/';
   
   // default file extension for corner images is PNG
   var cornerImageFileExtension = '.png';
   
   // default corner radius
   var cornerRadius = '12';
   
   $(document).ready(function(){
   	$('.corners').each(function(i){
   		var parentDiv = $(this).parent();
   		var cornerColor = null;
   
   		// find parent background color (trace up through DOM)
   		while(cornerColor == null && parentDiv != null){
   			if($(parentDiv).css('background-color') != 'transparent'){
   				cornerColor = $(parentDiv).css('background-color');
   				cornerColor = cornerColor.substr(1);
   			}
   			else if($(parentDiv).hasClass('bodyWrapper')){
   				cornerColor = '6f98ae';
   			}
   			else{
   				parentDiv = $(parentDiv).parent().get(0);
   			}
   		}
   
   		// apply corner <div/> tags to elements
   		if(cornerColor != null){
   			// find border offsets
   			var offsetTop = parseInt($(this).css('border-top-width')) || 0;
   			var offsetRight = parseInt($(this).css('border-right-width')) || 0;
   			var offsetBottom = parseInt($(this).css('border-bottom-width')) || 0;
   			var offsetLeft = parseInt($(this).css('border-left-width')) || 0;
   
   			// add "-border" to any image path (for border-only corners)
   			var borderImageText = '';
   			if(offsetTop > 0 && offsetRight > 0 && offsetBottom > 0 && offsetLeft > 0){
   				borderImageText = '-border';
   			}
   
   			// change color values like "#fff" to "#ffffff"
   			if(cornerColor.length == 3){
   				cornerColor += cornerColor;
   			}
   
   			// set position to relative (if not already set)
   			if($(this).css('position') != 'absolute' && $(this).css('position') != 'relative'){
   				$(this).css('position','relative');
   			}
   
   			// corner image filename
   			var cornerImage = 'corners-' + cornerRadius + '-' + cornerColor + borderImageText + cornerImageFileExtension;
   
   			// add corners
   			if(!$(this).hasClass('noTL')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') top left no-repeat;"/>');
   				$(cornerDiv).css('top',(offsetTop * -1) + 'px');
   				$(cornerDiv).css('left',(offsetLeft * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noTR')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') top right no-repeat;"/>');
   				$(cornerDiv).css('top',(offsetTop * -1) + 'px');
   				$(cornerDiv).css('right',(offsetRight * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noBL')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') bottom left no-repeat;"/>');
   				$(cornerDiv).css('bottom',(offsetBottom * -1) + 'px');
   				$(cornerDiv).css('left',(offsetLeft * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noBR')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') bottom right no-repeat;"/>');
   				$(cornerDiv).css('bottom',(offsetBottom * -1) + 'px');
   				$(cornerDiv).css('right',(offsetRight * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   		}
   	});
   });
   
   String.prototype.endsWith = function(str){
   	return(this.match(str+"$")==str);
   }

4. Take a look at the configuration variables near the top of the script and update if needed
5. Link to your new JS file, but make sure only IE users are loading the file:

   <!--[if lte IE 8]>
   	<script type="text/javascript" src="/path/to/IE-Corner-Inserts.js"></script>
   <![endif]-->

6. Create your corner images and place them in the correct path on your web server. I recently made available a corner images Photoshop template if you need help getting started.

That’s it! If all goes well, you should hopefully see image-based rounded corners in Internet Explorer, as well as the more simplistic CSS-powered corners in all other browsers.

Rounded corners are all the rage; they have been for some time now. There are pure CSS approaches to implementing this type of design, but occasionally your clients demand that your user experience be consistent across all browsers. Whether it’s time to stop using HTML and images for rounded corners is still a matter of debate. Nonetheless, I think every designer finds themselves doing this from time to time.

Say No to Images

I’ve found that many designs contain various types of rounded box styles on the same page. In my previous tutorial, this would demand that you create a separate corner image for each style of box. If you have a box with a red background, you’ll need to create a corner image with red corners. That makes sense from a visual perspective. From a data perspective, however, it’s not the best approach. If you think about it, the only thing you’re really “downloading” when you download a corner image is the curvature of your box’s edge. Wouldn’t it be better if we could somehow reuse that data on every box style everywhere else in your design?

Well, you can! How gloriously fantastic! Well…don’t get all excited just yet. There are a few limitations to this. This will only work when your rounded box appears on a solid color. For instance, the text you’re reading right now is on a solid white background. We can easily add rounded boxes to this page because of the solid color. This doesn’t really work if your background is an image or a gradient color.

Meet the Sprite

So, you have a solid background color, and you’re ready to add some rounded corner boxes to your page. The only really important thing here is your corners image. In Photoshop or an image editing software of your choice, create a square image. Basically, your image is all four box corners stuck together, so make it symmetrical. Fill your image with the background color of your page, and then delete a circle out of the middle of the square. It’s that easy! Here’s what it should look like when you’re done:

In case you’re not Photoshop-savvy, I have created a few templates that you can download and use.

• TransparentCorners-10.psd – 10×10 pixel corner image template
• TransparentCorners-15.psd – 15×15 pixel corner image template
• TransparentCorners-20.psd – 20×20 pixel corner image template

The Markup

Now that we have this nice fancy reusable transparent corner image, it’s time to create the HTML that will be used to house our beautiful box and its contents. Here’s the basic setup:

<div class="box red">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>This is your box content. Lorem ipsum dolor sit amet.</p>
</div>

Pretty simple, right? We have an outer “box” <div/>, a <div/> for each corner, and then our content that will appear inside the box.

The Style

Our HTML doesn’t do much by itself. Most of the work to be done is going to be done in our CSS style sheet. In an attached style sheet, add the following CSS:

.box {
	position: relative;
	padding: 1em;
}
.red {
	background: #cc0000;
	color: #fff;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url(/path/to/cornerImage.png) no-repeat;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: 100% 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 100%;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: 100% 100%;
}

As you can see, we’re really trying to keep this simple. Basically, we have an outer “box” style, a “red” style that sets the box’s background color to red, and finally individual “corner” styles that will automatically position themselves at the edges of our content, regardless of the height/width of that content. Groovy.

The Result

I’ve created a simple “white” background corner image for use on this page. What you get when you put all of this together is a very flexible corner system that requires very little HTML and CSS to implement:

And the coolest part…

It’s Reusable!

The coolest part about using transparent images for our corners is that we can apply these corners to just about anything on our page that we want to. For instance, I could create some additional box styles (other than “red”) by adding a bit of CSS.

.red {
	background: #cc0000;
	color: #fff;
}
.blue {
	background: #00cc00;
	color: #fff;
}
.green {
	background: #0000cc;
	color: #fff;
}
.gray {
	background: #dedede;
	color: #666;
}

After changing our box’s class (class="box blue", class="box green", etc.), we would get:

That’s really cool, but this doesn’t even touch the limits of how you can apply this. In addition to solid color boxes, we could also apply this to photos and gradients (which would be much harder in a more traditional corner system). Our corners really don’t care what type of content they’re applied on, they only really care about the background color. Let’s try it out on some different page elements (accompanying HTML and CSS are included for each style):

The Mini Profile

HTML:

<div class="box photo">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<h3>My Profile</h3>
	<img src="kyle.jpg" alt="Me" />
</div>

CSS:

.photo {
	width: 200px;
	padding: 0;
}
.photo h3 {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	margin: 0;
	font-size: 1em;
}

The Gradient

HTML:

<div class="box blueGradient">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>Notice the gradient background image!</p>
</div>

CSS:

.blueGradient {
	background: url(gradient-image.png) repeat-x;
	color: #fff;
}

We’ve accomplished all of the styles you see above using a single image and some fancy CSS footwork. This really minimizes the impact of your corners on page download times, especially if you’re using a number of different styles on a single background color. No scripts, no confusing HTML, simple markup, and a single image. Happy styling.

I’m very fortunate for having attended An Event Apart in Boston this week. I talked to thought leaders, design experts, tech gurus, and many more interesting and successful people during the event. I’m accustomed to being the only “UI guy” in the small organizations that I’ve worked for, so it was nice to meet other people who do what I do. One of the most interesting things that I took away from the event was the fact that design leaders are strongly pushing for web design to move in a new direction (well, I’m not sure if it’s fair to call it “new,” but the push is stronger than ever before).

What I mean when I say this is that many designers are asking you to stop using rounded corner techniques that require extraneous HTML (use the CSS property border-radius instead).  Stop using semi-transparent PNG images for background colors (use rgba instead).  Stop doing all those little extra things that you do in order to make sure your site is pixel-perfect on every single browser and operating system. Like I said, it’s certainly not a new subject to bring up, but I was surprised at the ferverous support behind it at the conference. I had briefly touched on this subject in my post about CSS rounded corners, where I seem to have agreed with these experts on a number of levels. My opinion is that you should never choose to increase page load times for everyone just simply to ensure that IE users can see rounded corners.

I think Dan Cederholm said it best when he referred to these little design touches (such as rounded corners) as “design rewards” for users who are using the most common OS/browser combinations. Don’t think them as design features, but rather as rewards for users who can utilize them. This makes your site faster, more flexible, and easier to develop. Dan is so passionate about this concept that he created a website to convey his feelings:

Do websites need to look exactly the same in every browser?

I’m not saying we should do away with rounded corner techniques entirely. In fact, I use my own Karate Corners all the time, but I do it when it’s necessary and appropriate.  If I’m working on my own project (where I am the primary stakeholder), I will most certainly go the pure CSS route, but as designers, we know that our clients don’t always agree. The most prominent argument against this concept is that our clients don’t really understand the benefits of using pure CSS to create corners and other design “rewards.” The only thing the client can understand is that Mr. CIO uses IE6 on his Windows 2000 desktop and he wants to see the rounded corners that were shown to him in the design concept.

It’s a difficult thing to manage client expectations, and sometimes it’s necessary to bite the bullet and give the client exactly what they want, even if you disagree with them. The best thing we can do is to make the benefits of this technique clear to the client, and hope that they can let go of the aging concept that your website has to be identical on all possible combinations of platform and browser.

There’s certainly a discussion to be had, and I’d love to hear your thoughts on the subject. Let the debate begin…

Both Mozilla Firefox and Apple’s Safari browsers have made it incredibly easy to eliminate those sharp corners with a single CSS attribute. Here’s the code:

.myRoundedBox {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

You’ll notice that this CSS isn’t merely clipping the contents of the block element you’re applying it to. If your <div/> has a border associated with it, the border will adhere to the contours of your newly rounded corner. Throw in a slight background color or gradient, and you can create some really stunning effects. Here’s a quick look at something I was creating, just to play around with this great new feature:

Using border-radius instead of corner images can eliminate a lot of HTML and unneeded CSS, which saves on bandwidth and improves the performance of your site as a whole. Of course, the big monster of a caveat here is that your design won’t be consistent across browsers. That certainly isn’t good, but on the other hand, rounded corners don’t have any effect on the functionality of your site, so it will work just the same on any browser.

For more information about this upcoming CSS3 attribute, see the official W3C specification here. In addition, Mozilla’s proprietary support for this feature is documented here.

Seeing is believing, so without further adieu…

View the Karate Corners Demo by clicking here.

Update: Read my subsequent post for a more advanced example of this technique!
Update: Read a even more advanced version of this technique in an even newer tutorial!
Update: Find out how to automatically generate the HTML and CSS for this technique using jQuery.

I took the best of the best and came up with a very simple way to create totally scalable boxes with round corners. I’ve tested this on Internet Explorer 6, IE 7, Mozilla FireFox 2, Firefox 3, Opera 9, and Safari 3.

The Code

The HTML code is relatively simple. You have an outer <div> tag with four “corner” <div>s inside of it. Each of these corner <div>s are positioned with CSS so that they always appear at each corner of the outer <div> box.

HTML:

<div class="cornerBox">
    <div class="corner TL"></div>
    <div class="corner TR"></div>
    <div class="corner BL"></div>
    <div class="corner BR"></div>
    <div class="cornerBoxInner">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

CSS:

.cornerBox {
	position: relative;
	background: #cfcfcf;
	width: 100%;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url('corners.gif') no-repeat;
	font-size: 0%;
}
.cornerBoxInner {
	padding: 10px;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: -10px 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 -10px;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: -10px -10px;
}

The Image

Only one image is used for this box (shown above). In my example, I created a 20×20 circle, which is comprised of four 10×10 corners. By shifting the background image around, you can eliminate the need to download four separate GIF files on each of your boxes.

The Result

Karate Corners! Click on the image above to see the HTML demo. Happy styling!