HTML & CSS: Rounded Corners, Box Shadows and Text Shadows

We’ve already looked the opacity property in CSS3 – however there are a few other features that have been implemented in modern browsers and are nice, useful features.

Rounded corners

Not too long ago it was extremely difficult to get rounded corners on an element. If you wanted your main content division to have a subtle curved edge, you’d have to go to a lot of efforts and various hacks to do this.
Luckily for us web designers and developers, CSS3 brings in rounded corners. It’s worth noting that since these are CSS3 that they won’t work in older browsers and in most versions of IE but don’t worry as most of the time it really isn’t the end of the world if a few users see square corners.
Let’s just create a division to demonstrate our rounded corners – a simple division with a height and width should do:

HTML:

<div id="Content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

CSS:

body {
	background: #af9f7b; /* Body background */
}

#Content {
	width: 380px; /* Division width */
	height: 380px; /* Division height */
	background: #775e43; /* Division background */
	border: 2px solid #251c17; /* Division border */
	/* Set font-size, line-height and font-family */
	font: 15px/1.5em helvetica, arial, sans-serif;
	color: #130a05; /* Text colour */
	padding: 20px; /* 20px Padding */
	margin: auto; /* Center the division */
}

A nice subtle rounded corner effect would add another dimension to our rather basic looking, square page – to add rounded corners you need to put in the different vendor versions as well as the CSS3 version. This is because the browsers implemented before it was officially released and so we need to support the older browsers that don’t quite support the regular CSS3.
The CSS3 property is “border-radius”. For Firefox we use “-moz-border-radius” and for webkit based browsers (Safari and Chrome) we use “-webkit-border-radius”. We should put in all three and should put the regular CSS3 property last as it’s ideally what we want to use.
In our case we want to add something like the following:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

The main division now has nice rounded edges!
Note that this works for many elements (including images and a variety of others).

Box Shadow

Another useful CSS3 property is “box-shadow”. This once again has some vendor specific versions and is used to set shadows on box elements (divs, images etc).
It takes four parameters. The x-offset, the y-offset, the blur radius and the colour. This is the most common use, however there are a few other optional parameter (the blur radius and the colour are in fact also optional. The other optional parameters include the spread (size of shadow) between the blur and colour, and the shadow type (inset (inside) or outset (outside)) which goes at the end.
Since we have a nice webpage example already set up from the border-radius example, let’s add the vendor specific lines and the CSS3 standard to our Content div:

-moz-box-shadow: 1px 1px 5px #140b06;
-webkit-box-shadow: 1px 1px 5px #140b06;
box-shadow: 1px 1px 5px #140b06;

Text Shadow

Adding text shadows is another of the very useful effects in CSS3 that has been implemented in modern browsers.
We can use the “text-shadow” property and it should work throughout all modern browsers (although it has a few issues in IE – most of the time it’s not the end of the world if one IE user doesn’t see a text shadow).
There are many different effects you can accomplish throught text-shadow. It takes the x-offset, y-offset, blur and then colour (much like the box-shadow property). You might want to add something like the following to our basic webpage:

text-shadow: 0px 1px 2px #aaa;

This adds a small grey-ish shadow beneath our text.



Back to HTML & CSS