Post
Ask Question

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.      margin: 0;  
  7.      padding: 0;  
  8.      color: #222;  
  9.      font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;  
  10. }  
  11.   
  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. }  
  24.   
  25. ul li {  
  26.      float: left;  
  27.      margin: 0 20px 0 0;  
  28.      padding: 0;  
  29. }  
  30.   
  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. }  
  51.   
  52. ul li.current a {  
  53.      background: #efefef;  
  54.      color: #222;  
  55.      height: 30px;  
  56.      text-shadow: #fff 0 1px 0;  
  57. }  
  58.   
  59. ul li {  
  60.      position: relative;  
  61. }  
  62.   
  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. }  
  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.      position: relative;  
  91. }  
  92.   
  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. }  
  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-right: 1px 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-left: 1px solid #222;  
  121. }  
  122.   
  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>  
Next Recommended Reading Using CSS Animations to Add Flair to Your Radial Menu Design