Tutorials

Have Fun w/ Borders – Beveled, Pressed, & More!

Tags: Beginner, Quick Tip

Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.

Light Shadow

A simple light shadow effect can be achieved with using shades of grey with borders. With CSS3 you can achieve a real shadow effect using box shadow, but this is a clean and simple way that works in all browsers.

CSS

.shadow {
	padding: 20px;
	border: 1px solid #f0f0f0;
	border-bottom: 2px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Pressed

The pressed effect is very similar to the CSS Letter Press technique but we rely solely on border colors to achieve the effect. Add some CSS3 rounded corners and you can achieve a very clean pressed look to your layouts.

CSS

.pressed {
	color: #fff;
	padding: 20px;
	background: #111;
	border: 1px solid #000;
	border-right: 1px solid #353535;
	border-bottom: 1px solid #353535;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Beveled

This technique is very similar to your double border technique commonly used with images. With a little bit of tinkering, you can achieve a subtle beveled effect using the outline property.
CSS

img.light {
	outline: 1px solid #ddd;
	border-top: 1px solid #fff;
	padding: 10px;
	background: #f0f0f0;
}
img.dark {
	outline: 1px solid #111;
	border-top: 1px solid #555;
	padding: 10px;
	background: #333;
}

Indented Lines

I use this technique often when creating vertical menus and lists. Its a simple combination of top and bottom borders with different shades of the background color. Keep in mind the first-child and last-child CSS selectors are not supported by older browsers. You can read more about this here. To get around it, you can use some jQuery to support older browsers.
CSS

#indented ul{
	margin: 20px 0; padding: 0;
	list-style: none;
}
#indented ul li {
	border-top: 1px solid #333;
	border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
	padding: 10px;
	display: block;
	color: #fff;
	text-decoration: none;
}
#indented ul li a:hover {background: #111;}

Related Articles

• Quick Tip: Multiple Borders with Simple CSS
• Multiple Backgrounds and Borders with CSS 2.1
• CSS Trick: Creating a Body-Border
• Creating Shapes With CSS Borders
• CSS SPEECH BUBBLE