«Как-бы» круглая граница текста(блока) делается довольно легко, используя всего 3 вложеных елемента :)
Расмотрим CSS:

ul.r1pxc, ul.r1pxc li, ul.r1pxc a, ul.r1pxc b { /*  обнуляем все елементы и начинаем параметры указывать: */
	text-decoration: none;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;}
ul.r1pxc li { /*  отступы */
	float: left;
	clear: both;
	left: 1px; /*  своеобразный паддинг слева*/
	list-style: none; /*  нам не нужны лишние "артефакты" :) */
	background-color: #aaa; /*  цвет бордера, верхнего */
	border-bottom: 2px solid #aaa; /*  цвет бордера, нижнего */
	margin-bottom: 5px;}
ul.r1pxc li a {
	width: 120px; /*  длину елемента, в данном случае ссылки */
	float: left;
	left: -1px;
	top: 1px; 
	margin-right: -2px;	/*  что бы появилась правая граница */
	background-color: #ddd;} /* цвет фона */
ul.r1pxc li a:hover {
	background-color: #ccc;} /* цвет фона при наведении мышей */
ul.r1pxc li a b {
	border: solid #aaa; /*  цвет бордеров */
	border-width: 0 1px 0 1px; /*  бордеров правой и левой стороны */
	padding: 4px; /*  просто паддинг для текста */
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;}

а в HTML всё просто:

<ul class="r1pxc"><li><a href="#"><b>Example</b></a></li></ul>

• Посмотреть пример
• Скачать пример 0.7Kb

ps: подглядел вот здесь