robperson.com

I’m writing this post thanks to ProBlogger’s 31 Days to Build a Better Blog challenge. Day two’s task is to write a list post. This list is actually something I’ve been meaning to post for a while. The topic of rounded corners is a popular one in web design. If you were to Google “rounded corners” you’d get over 23 MILLION hits, most of which having something to do with CSS or HTML. There are many techniques available to accomplish the task of rounding out your HTML elements. The best one I’ve used is Nifty Corners Cube. It’s simple, light-weight, easy to use, and it works exactly as advertised. Well, most of the time it does. There are some interesting side effects that aren’t clearly explained on the Nifty Corners Cube website. There’s also some interesting things you can do with it that you may not have thought of. Here’s my list of tips (not necessarily in order):

1. Remember to use ‘fixed-height’ where appropriate. If the element you are trying to round has a height specified in your CSS, you need to use the ‘fixed-height’ option when calling the Nifty function. If you don’t,the rounded part will show up wherever your elements descendants end, which may not be at the bottom of your element. Example:

   Nifty("#someID","fixed-height");

2. Take special care when using floats inside of rounded elements. If you do, it’s possible that the rounding elements added by Nifty will end up floating around your content and looking weird. The easiest way to fix this is to modify the elements generated by Nifty in your stylesheet. This is all you need:

   b.niftycorners {clear: both;}

3. Make sure your padding is in pixels! The troubleshooting section on the Nifty webpage makes special mention of vertical padding, but it’s even more important to use pixels for horizontal padding (left and right). There are two things to consider: first, padding should be in pixels. If they are in relative units like em’s, unpredictable things happen to your corners. For me they were always pushed in by a few pixels on each side. Second, your padding should be at least as large as the corner radius. The default is 5px. Refer to the documentation for the pixel values of the other sizes (small and big).

4. Specify a width for block level elements. This is necessary to deal with a special case that occurs in Internet Explorer. It also applies to any element with a ‘display:block’ rule. Normally, a block level element will take up 100% of its parent’s available width. You probably know this, and take advantage of it by not specifying ‘width:100%’ on every block level element. This is fine until you use Nifty Corners and view your site in Internet Explorer. For reasons I do not understand, when you call Nifty on a block level element with no width, it will change its display attribute to ‘inline-block’. They will still be positioned properly and be rounded but they will not fill their parent’s with like you probably expected. This might be acceptable in your design, but it bothered me visually and confused the crap out of me. After searching through the Nifty code and little bit of random experimenting I figured out the problem: you have to specify a width! Any width. Units don’t matter.

5. You can use it with background images! Maybe I’m too easily entertained, but I thought this was awesome. This makes it easy to round arbitrary images (the new Facebook is a good example, though they use a different technique). I discovered this while developing a website for a client. You can see an example on the unfinished page here. The corners aren’t aliased, but the effect is still nice. Just make sure that you specify the ‘transparent’ option in the call to Nifty if you specify a background color in addition to a background image. Example:

   Nifty("#roundedImage","transparent");

That’s all I could think of. This list is a result of problems that I ran to and the solutions I came up with after Google failed me (?!). If you’ve got more tips or any input, please leave a comment!