Вы не представляете какие интересные вещи можно делать на web-странице с помощью CSS свойства border!

Используя свойство border, вы можете не только выделять блочные элементы, но и рисовать множество видов графических примитивов, таких как: ромб, треугольник, трапеция и многое другое.
Поддержка CSS свойства border браузерами

Большинство современных браузеров (Opera 7+, Mozilla, Firefox) полностью поддерживают спецификацию CSS в отношении свойства border. Но есть и исключения:
Internet Explorer 5
— искренне считает, что border может быть только solid (сплошная линия).
Internet Explorer 6
— не знает про существование dotted и некоторых других вариантов border.
Создание заготовки для графических примитивов

Создадим пустой блочный элемент «<div class="storage"></div>» и CSS свойства для него:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
</style>

<div class="storage"></div>

Свойство «font-size:0» задается, потому что Internet Explorer считает, что блочный элемент должен иметь вертикальный размер, соответствующий размеру шрифта по умолчанию, Т. е. 16 px. А свойство «height:0» используется для того, чтобы Internet Explorer 5 отобразил пустой блочный элемент.
Примеры графических примитивов
Треугольник

Пример кода:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.triangle{
	border-bottom:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:0
}
</style>

<div class="storage triangle"></div>

Трапеция

Пример кода:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.trapezium{
	border-bottom:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:40px
}
</style>

<div class="storage trapezium"></div>

Будьте внимательны: Internet Explorer 5 неправильно обробатывает размеры блочных элементов.
Ромб

Пример кода:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.rhomb-up{
	border-bottom:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:0
}
.rhomb-down{
	border-top:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:0
}
</style>

<div class="storage rhomb-up"></div>
<div class="storage rhomb-down"></div>

Песочные часы

Пример кода:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.sand-glass{
	border-top:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	border-bottom:50px solid #f90;
	width:0
}
</style>

<div class="storage sand-glass"></div>

Абстракция

Пример кода:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.abstraction{
	border-top:50px groove #f90;
	border-left:50px groove #f90;
	border-right:50px groove #f90;
	border-bottom:50px groove #f90;
	width:0
}
</style>

<div class="storage abstraction"></div>

Выводы

Используя различные комбинации CSS свойства border, можно, во-первых, добиться множества интересных эффектов, а во-вторых, избавиться от части оформительской графики.