Test for Border-Radius Support

Published April 15, 2010 by saurav.roy.

Of all the fantastic magical CSS3 properties out there, border-radius was one of the first I really latched on to. It made sense to me from the start, and I could see immediate practical uses (at least, as far as a border can be practical). If you’re not using the border-radius property yet, be sure to check out my article on how to use it.

Unfortunately, even though more advanced browsers started supporting border-radius years ago, not all browsers are up to speed yet. As of this writing, border-radius is supported in Webkit (Safari/Chrome), Firefox, and rumor has it Konqueror, though I don’t have a Linux install so I can’t prove that. That leaves Opera and Internet Explorer out of the game – I’ve heard rumors that Opera will support border-radius soon, but the latest version is still a no-go.

As I argued in my last article on the topic, most of the places people should use rounded corners today fall into the realm of “progressive enhancement”: the site looks better with the element rounded, but it’s not the end of the world if someone sees a square corner.

Of course, what should be true and what a client requires aren’t always the same thing. Read On…

12 Creative and Cool Uses for the CSS Border Property

Published December 23, 2008 by saurav.roy.

random art using the CSS border property

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for. Read On…

Easy Rounded Corners with Border-Radius

Published August 6, 2008 by saurav.roy.

The realm of CSS is a realm of boxes. Everything on the page is a box, within a box, within a box. No wonder it’s so common for beginning CSS developers (or, in my case, poor graphic designers with too much CSS experience) to create boxy layouts!

However, the forthcoming CSS3 specification offers us a glimmer of hope in the form of rounded corners. That’s right — once CSS3 is commonly supported, we’ll be able to childproof all those pointy edges and beautify the web in the process.

And better yet, a few browsers already support rounded corners! As I’m writing this, you’re pretty much limited to Mozilla/Firefox and Safari 3. However, this list is bound to grow as time goes on, so it couldn’t hurt to start playing around with this feature. Especially considering that, in the browsers that don’t support rounded corners, nothing bad happens — the user just sees regular, square corners.

For now, to get the code to work, you’re stuck using proprietary CSS tags: they won’t validate, but they’ll just be ignored by browsers that don’t support them. The code itself is pretty simple; for example, to create a div with nice rounded corners with a radius of 5 pixels, you’d just write something like this:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

And this rule will create a div that looks like this:

The two properties of note here are “-moz-border-radius” and “-webkit-border-radius.” The former is how to specify the radius — number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner (see the image below) — in Mozilla-based browsers. The latter is doing the same thing, but for Safari.

The rule isn’t just limited to curving background colors, either. If you were to add a border to the element, the border would become rounded, as well. For example, a block quote could be styled like so:

blockquote {
	margin: 1em 20px;
	padding: 10px;
	border: 2px solid #555;
	background-color: #f2f2f2;
	color: #555;
	font-size: 140%;
	text-align: justify;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; }

Resulting in a block quote that has a lot of style, without relying on images to accomplish the task:

And finally, you’re also not limited to either all rounded corners or none. Using this property, you can specify which corners you want rounded in your CSS. However, it’s important to note that the Firefox-based version of this rule has deviated a bit from the W3C standard, meaning it’s written slightly differently than the Safari-based rule. For example, consider these two rules used to round out the top-left corner of a box:

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

It’s a minor difference, in the grand scheme of things, but pretty critical if you want your rounded corners to show up where and how they should! Using the ability to round individual corners, you could generate fancy alert messages:

.alert {
	border: 2px solid #fc0;
	padding: 8px 10px;
	font-size: 120%;
	color: #c90;
	font-weight: bold;
	background-color: #ff9;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;	
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px; }

Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:

.comment {
	border: 1px solid #999;
	background-color: #d8d8f4;
	margin: 1em 40px;
	padding: 15px;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;	
	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius: 8px; 	
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px; }

You can see all of my examples in action here. And these are just a few ways of the hundreds of ways you can harness the power of rounded corners with just a few lines of code. With techniques like this at our disposal, it’s easy to see why we’re all so eagerly awaiting CSS3!

Writing CSS Shorthand

Published April 7, 2008 by saurav.roy.

"Jeri Rowe" by spcoon.

Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then?

There are lots of things you can do to help – embracing the cascading nature of CSS helps a great deal, as does combining CSS declarations using sequential selectors. But another trick that can really help cut down on the size of your CSS is to use CSS shorthand properties whenever possible. There are six shorthand properties for various areas of your CSS: margins, padding, borders, backgrounds, list-styles, and fonts. I’ll go through each of them below.

The margin shorthand property combines the margin-top, margin-right, margin-bottom, and margin-left properties into one single property. So instead of writing this:

div {
	margin-top: 5px;
	margin-right: 8px;
	margin-bottom: 3px;
	margin-left: 4px; }

You could shorten it all down to this:

div { margin: 5px 8px 3px 4px; }

It’s important to remember to always put your margins in the shorthand property in the following order: top, right, bottom, and left. Basically, just start at the top and work your way around the element clockwise. And if your top/bottom and left/right margins match, you can boil your shorthand down even further:

div { margin: 5px 8px; }

The rule above applies a 5 pixel margin to the top and bottom of your div, and an 8 pixel margin to the left and right sides. If all four of your margins match, you could even just write this:

div { margin: 5px; }

The padding shorthand property works exactly the same way as the margin shorthand. The biggest thing to remember about both of these properties is to start at the top and work your way around clockwise. And if you’re shortening it to two values, the top/bottom value always goes first, followed by the left/right value. Further, if you don’t need to specify a value on any one of the sides, you can just specify a zero (0) size with no unit of measurement.

div { padding: 30px 0; }

The border property allows you to combine the border-width, border-style, and border-color properties into one. The width comes first, followed by the style, and then the color. So instead of writing out all this:

div {
	border-width: 3px;
	border-style: solid;
	border-color: #c00; }

You could boil it down to a single rule, like so:

div { border: 3px solid #c00; }

The background property is fairly powerful, in that it combines five rules into one: background-color, background-image, background-repeat, background-attachment, and background-position (in that order). So instead of writing this verbose mess of code:

div {
	background-color: #fff;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-position: top center; }

We could boil all of that down to this little snippet:

div { background: #fff url(../img/bg.gif) repeat-y fixed top; }

Also note that I skipped the “center” portion of my background-position property: if you specify one background position (i.e. “top”) but neglect to specify a second position value, “center” is the assumed value.

The list-style shorthand property isn’t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties – you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:

ul {
	list-style-type: square;
	list-style-position: inside; }

You could write this:

ul { list-style: square inside; }

Generally speaking, however, I tend to only use this shorthand when I’m looking to remove styling from the list (as when building a navigation bar):

ul { list-style: none; }

The font shorthand property is probably the most powerful of all the shorthand properties. It combines a grand total of six properties into one: font-style, font-variant, font-weight, font-size, line-height (even though it’s not technically a font property), and font-family. So instead of writing out all six of these rules:

p {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: small;
	line-height: 1.2em;
	font-family: Helvetica, Arial, sans-serif; }

I can get by with a single declaration:

p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

Of course, most of the time you won’t be specifying all six of those properties at once – I can’t even imagine how difficult it would be to read italicized, bold-faced small caps! But it is very useful for specifying your font-size, line-height, and font-family all in one place. That way, all of your typeface information sits one convenient location.