Tags are used on many popular sites such as flickr, delicious and youtube. There are many methods of displaying tags including tag-clouds and lists; a visually appealing method of displaying tags is to enclose each tag in a rounded bubble. This small tutorial will show you how to enable this effect using the "moz-border-radius" CSS and HTML "span" tags.

1. First add the following to your CSS:

span.tag {
	margin: 8px auto 0 auto;
	padding: 1px 10px 1px 10px;
	font: bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	background-color: #CAE8EA;
	border: 1px solid #b0cbf6;
	width: auto;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	line-height: 25px;
	}

2. Next insert the following code where you want the tag bubble to appear:

<span class="tag">Tag-text</span>

The end result:

Tags: CSS