How to Make Rounded Tabs in CSS
Rounded tabs are a common style of navigation on websites. Site visitors click on tabs to load different pages within the website. The method for making rounded tabs navigation is similar to the process that makes navigation bars, but you need to know how to shape each menu item into a tab. The “box-radius” property in CSS allows you to round the two top corners to turn your menu items into tabs. All other styles -- tab colors, text colors and fonts -- depend on the styles you want for your website.
Other People Are Reading
Instructions
-
-
1
Add an unordered list to your Web page using “<ul>” tags. Place a link inside each list item to create a clickable tab:
<ul id=”tabs”>
<li><a href=”page1.html”>Page 1</li>
<li><a href=”page1.html”>Page 2</li>
<li><a href=”page1.html”>Page 3</li>
</ul> -
2
Open the style sheet for your website. If you do not have one yet, create a blank file and save it as “mystyles.css”. Use this code between the “<head>” tags in your Web page to embed the style sheet:
<link rel=”stylesheet” href=”mystyles.css” type=”text/css” />
Both the style sheet and Web page must be in the same folder to make the previous code work.
-
-
3
Write a style rule for the unordered list, targeting its ID name. Inside the rule, turn off list bullets and remove left-side padding:
#tabs {
list-style: none; /* removes bullets */
padding-left: 0; /* removes list indentation */
} -
4
Style the tabs by styling the anchor tags:
#tabs a {
background-color: blue;
color: white;
padding: 10px 5px;
display: block; /* necessary when padding anchors */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}The previous example colors the tabs blue with white text, pads them a bit and makes the two top corners rounded.
-
5
Float each list item to the left to make the tabs run horizontally across the screen:
#tabs li {
float: left;
}You cannot add “float: left” to the anchors as you did with the other properties because this causes an issue where the tabs will look like steps.
-
6
Create a hover state for the tabs:
#tabs a:hover {
background-color: green;
}In the example, when you hover the mouse over a tab, it will turn green.
-
1
