Border with opaque html border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Border with opaque html border

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!-- ww  w  . ja v a  2  s . c  o  m-->
   background:#000;
   color:#fff;
   font-weight:bold;
   padding:50px;
}
.prices {
   width: 400px;
   border-spacing: 0;
   border-top: 2px solid rgba(255,255,255,.2);
}
.prices tbody tr:first-child td {
   padding-top: 12px;
}
.prices tbody tr:last-child td {
   padding-bottom: 12px;
   border-bottom : 2px solid rgba(255,255,255,.2);
}


      </style> 
 </head> 
 <body translate="no"> 
  <h2>Prices</h2> 
  <table class="prices"> 
   <tbody> 
    <tr> 
     <td>Bananas</td> 
     <td>$1/lb</td> 
    </tr> 
    <tr> 
     <td>Oranges</td> 
     <td>$4/lb</td> 
    </tr> 
    <tr> 
     <td>Peaches</td> 
     <td>$2/lb</td> 
    </tr> 
   </tbody> 
   <tbody> 
    <tr> 
     <td>Carrots</td> 
     <td>$1/lb</td> 
    </tr> 
    <tr> 
     <td>Lettuce</td> 
     <td>50?/head</td> 
    </tr> 
    <tr> 
     <td>Broccoli</td> 
     <td>$1/head</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials