Introduction

It is reverse rounded corners without any images. The flare effect is a combination of two steps. First, we cover up the bottom left and right outside edges with the same background color as our tab. It can be viewed on any browser i.e. It supports all the browsers.
CSS1.jpg
Now if we flared the "about" then it will look like this :
CSS2.jpg
CSS Code
  1. html {
  2. background-color: #efefef;
  3. }
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. color: #222;
  9. font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
  10. }
  12. ul {
  13. position: absolute;
  14. left: 0;
  15. right: 0;
  16. top: 0;
  17. height: 30px;
  18. background: #959DA5;
  19. border-bottom: 1px solid #333;
  20. margin: 0;
  21. padding: 10px 16px 0;
  22. list-style: none;
  23. }
  25. ul li {
  26. float: left;
  27. margin: 0 20px 0 0;
  28. padding: 0;
  29. }
  31. ul a {
  32. display: block;
  33. color: #fff;
  34. text-decoration: none;
  35. padding: 0 15px;
  36. line-height: 29px;
  37. height: 29px;
  38. font-weight: bold;
  39. background: #464646;
  40. border: 1px solid #333;
  41. border-bottom: none;
  42. -webkit-font-smoothing: antialiased;
  43. -webkit-border-top-left-radius: 8px;
  44. -webkit-border-top-right-radius: 8px;
  45. -moz-border-radius: 8px 8px 0 0;
  46. border-top-left-radius: 8px;
  47. border-top-right-radius: 8px;
  48. text-shadow: #000 0 -1px 0;
  49. webkit-background-clip: padding-box;
  50. }
  52. ul li.current a {
  53. background: #efefef;
  54. color: #222;
  55. height: 30px;
  56. text-shadow: #fff 0 1px 0;
  57. }
  59. ul li {
  60. position: relative;
  61. }
  63. ul li:before,
  64. ul li:after {
  65. content: '';
  66. width: 9px;
  67. height: 8px;
  68. position: absolute;
  69. z-index: 2;
  70. bottom: 0;
  71. background: #464646;
  72. }
  74. ul li:before {
  75. left: -8px;
  76. }
  78. ul li:after {
  79. right: -8px;
  80. }
  82. ul li.current:before,
  83. ul li.current:after {
  84. background: #efefef;
  85. bottom: 0;
  86. -webkit-background-clip: padding-box;
  87. }
  89. ul a {
  90. position: relative;
  91. }
  93. ul a:before,
  94. ul a:after {
  95. content: '';
  96. width: 10px;
  97. height: 8px;
  98. position: absolute;
  99. z-index: 3;
  100. bottom: -1px;
  101. background: #959DA5;
  102. overflow: hidden;
  103. border-bottom: 1px solid #333;
  104. -webkit-background-clip: padding-box;
  105. }
  107. ul a:before {
  108. left: -11px;
  109. border-bottom-right-radius: 8px;
  110. -webkit-border-bottom-right-radius: 8px;
  111. -moz-border-radius-bottomright: 8px;
  112. border-right: 1px solid #222;
  113. }
  115. ul a:after {
  116. right: -11px;
  117. border-bottom-left-radius: 8px;
  118. -webkit-border-bottom-left-radius: 8px;
  119. -moz-border-radius-bottomleft: 8px;
  120. border-left: 1px solid #222;
  121. }
  123. ul li.current a:before,
  124. ul li.current a:after {
  125. bottom: 0;
  126. }
HTML Code
  1. <body>
  2. <ul>
  3. <li><a href="#">Home</a></li>
  4. <li class="current"><a href="#">About</a></li>
  5. <li><a href="#">Products</a></li>
  6. <li><a href="#">Services</a></li>
  7. <li><a href="#">Contact</a></li>
  8. </ul>
  9. </body>