How to Make CSS Tabs with Rounded Corners
Designing menu tabs with rounded corners without using images isn’t as easy as it appears, but web developer Menno van Slooten has come up with a really good tutorial on this.
Click on the image to view the demo, then download the file.
In this tutorial, we’ll using CSS :before and :after pseudo elements to create this effect but let us start off with the basic HTML first.
HTML Markup
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>(Better) Round Out Tabs</title>
</head>
<body>
<ul >
<li><a href="#">First Tab</a></li>
<li><a href="#">Second Tab</a></li>
<li ><a href="#">Third Tab</a></li>
<li><a href="#">Fourth Tab</a></li>
</ul>
</body>
</html>
|
We can now apply some CSS on our tabs to give it its distinctive look, plus those rounded corners.
CSS
.tabrow {
text-align: center;
list-style: none;
margin: 200px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before, .tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
|
And there you have it. As far as browser compatibility is concerned, it works with all browsers except IE. According to those who’ve tried it, the curve does reflect on IE8 and IE9 since it supports the :before and :after pseudo elements but not border-radius, so be warned.
0
502
1 Comment
K20
03.15.2012
It doesn’t work at all for IE7
There are no trackbacks to display at this time.