Flared Borders With CSS

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. }  
  4.   
  5. body {  
  6.      margin0;  
  7.      padding0;  
  8.      color#222;  
  9.      font13px "Helvetica Neue"HelveticaArialsans-serif;  
  10. }  
  11.   
  12. ul {  
  13.      positionabsolute;  
  14.      left: 0;  
  15.      right: 0;  
  16.      top: 0;  
  17.      height30px;  
  18.      background#959DA5;  
  19.      border-bottom1px solid #333;  
  20.      margin0;  
  21.      padding10px 16px 0;  
  22.      list-stylenone;  
  23. }  
  24.   
  25. ul li {  
  26.      floatleft;  
  27.      margin0 20px 0 0;  
  28.      padding0;  
  29. }  
  30.   
  31. ul a {  
  32.      displayblock;  
  33.      color#fff;  
  34.      text-decorationnone;  
  35.      padding0 15px;  
  36.      line-height29px;  
  37.      height29px;  
  38.      font-weightbold;  
  39.      background#464646;  
  40.      border1px solid #333;  
  41.      border-bottomnone;  
  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. }  
  51.   
  52. ul li.current a {  
  53.      background#efefef;  
  54.      color#222;  
  55.      height30px;  
  56.      text-shadow#fff 0 1px 0;  
  57. }  
  58.   
  59. ul li {  
  60.      positionrelative;  
  61. }  
  62.   
  63. ul li:before,  
  64. ul li:after {  
  65.      content'';  
  66.      width9px;  
  67.      height8px;  
  68.      positionabsolute;  
  69.      z-index2;  
  70.      bottom: 0;  
  71.      background#464646;  
  72. }  
  73.   
  74. ul li:before {  
  75.      left: -8px;  
  76. }  
  77.   
  78. ul li:after {  
  79.      right: -8px;  
  80. }  
  81.   
  82. ul li.current:before,  
  83. ul li.current:after {  
  84.      background#efefef;  
  85.      bottom: 0;  
  86.      -webkit-background-clip: padding-box;  
  87. }  
  88.   
  89. ul a {  
  90.      positionrelative;  
  91. }  
  92.   
  93. ul a:before,  
  94. ul a:after {  
  95.      content'';  
  96.      width10px;  
  97.      height8px;  
  98.      positionabsolute;  
  99.      z-index3;  
  100.      bottom: -1px;  
  101.      background#959DA5;  
  102.      overflowhidden;  
  103.      border-bottom1px solid #333;  
  104.      -webkit-background-clip: padding-box;  
  105. }  
  106.   
  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-right1px solid #222;  
  113. }  
  114.   
  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-left1px solid #222;  
  121. }  
  122.   
  123. ul li.current a:before,  
  124. ul li.current a:after {  
  125.      bottom: 0;  
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>