HTML/CSS: Tabs with round top corners

Joined:
04/09/2007: Posts:
573

November 19, 2007 04:36:18

You need 2 images to make rounded tabs: 1 for the left corner, 1 for the right corner. The images would have an opaque tip (to match the background color of the page, usually white) and a transparent interior (so that the background color of the tab will show through). An example can be found here: http://www.elbandersnatcho.com/rounded-corners/index.php

Since one element can have only one background image, you need 2 HTML elements to make a tab with rounded top corners. In most cases, this comes natural. You can use one image for the list (<li>), another image for the anchor (<a>). Sample code follows.

<html>
<head>
<title>Tabs with round corners</title>
<style type="text/css">
	body {
		font-family: verdana, arial, sans-serif;
	}

	#tabs {
		float: left;
		width: 100%;
		border-bottom: #470ea7 2px solid;
		margin-bottom: 20px;
	}

	#tabs ul {
		margin: 0;
		padding: 0;
	}

	#tabs li {
		margin: 0 2px 0 0;
		padding 0;
		float: left;
		color: #999;
		background: #d7ead9 url(images/top-right.png) top right no-repeat;
		list-style: none;
		border-bottom: 1px solid #fff;
	}

	#tabs li.selected {
		background-color: #470ea7;
		border-bottom: 1px solid #470ea7;
	}

	#tabs li.selected a {
		color: #fff;
	}

	#tabs li a {
		display: block;
		float: left;
		font-family: verdana, arial, sans-serif;
		font-weight: bold;
		text-decoration: none;
		font-size: 85%;
		color: #999;
		background: url(images/top-left.png) top left no-repeat;
		padding: 3px 8px 3px 8px;
	}
</style>
</head>

<body>
	<div id="tabs">
		<ul>
			<li><a href="tab1">Tab One</a></li>
			<li class="selected"><a href="tab2">The Second Tab</a></li>
			<li><a href="tab3">Tab Three</a></li>
		</ul>
	</div>

	<div id="contents">
		Here comes the contents!
	</div>
</body>
</html>

[ Comment | Tags ]

Easy email testing with http://www.ximailstop.com

Ξ Notes

HTML/CSS: Tabs with round top corners

Related Notes