aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Create CSS Tabbed Menu with Rounded Corners | Simple tabbed Menu with CSS Example

Jan 23, 2013

Here I will explain how to create CSS tabbed menu with rounded corners or Simple CSS Rounded Corners tabbed menu.

In previous articles I explained jQuery Menu with Bounce Effect, Show div with particular scrollbar using CSS,
jQuery Restrict user to enter only numeric characters and many articles relating to jQuery,, CSS. Now I will explain how to create simple CSS tabbed menu with rounded corners. 

To implement CSS rounded corner tabbed menu we need to write the code like as shown below

<html xmlns="">
<title>Create tabbed Menu with Rounded Corners using CSS</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #404040;
background-color: #FFF;
#testnav {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
border-top: 0.5em solid #fff;
border-bottom: 0.4em solid #0288D8;
#testnav li {
float: left;
height: 2em;
margin: 0 0.5em;
#testnav a:link,
#testnav a:visited {
float: left;
height: 1.6em;
padding: 0.2em 0.5em;
background: #CCE7F7;
color: #0288E1;
font-weight: bold;
text-decoration: none;
border-width: 0.1em 0.1em 0 0.1em;
border-style: solid;
border-color: #CCE7F7;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
line-height: 1.6em;
position: relative;
top: 0.3em;
#testnav a:hover
background: #0288D8;
border-color: #0288D8;
color: #fff;
<ul id="testnav">
<li><a href="#">Home</a></li>
<li><a href="#"></a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL Server</a></li>
<li><a href="#">Contact</a></li>
Live Demo

For live demo check below menu

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...

Good one Sir...................):
Thany u sir.

Anonymous said...

cool! :)

- Jack

Kashish said...

can we add sub menu in this menu??


Interior Design Updater said...
This comment has been removed by a blog administrator.
Anonymous said...

good one sir & thnk u very much...
"can u tell me,what will be the effect when i want to add some sub item under any list item catagory???"
like under "" i wnt to add subitem like 1) c# 2)Vb 3) Ajax etc etc,,
plz reply..
Thanks in advance..

grootJan said...

This is cool. How do i include sub-menu and how do i do a selection when a choice has been made?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.