Panel with titled 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

Panel with titled border

Demo Code

ResultView the demo in separate window 

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

body {<!--from www .j  a  v  a2s.  com-->
   padding:5%;
}
.border {
   width:500px;
   margin:auto;
   border:1px solid #333;
   padding:1% 2%;
}
.title {
   width:250px;
   font-size:24px;
   font-family:Arial;
   background:#fff;
   text-align:center;
   margin:-30px auto auto;
}
.item-chunk {
   text-align:center;
   padding:5% 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="border"> 
   <h1 class="title">What we do</h1> 
   <div class="item-chunk"> 
    <p>Image tag comes here</p> 
    <h2>Design</h2> 
    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> 
   </div> 
   <div class="item-chunk"> 
    <p>Image tag comes here</p> 
    <h2>Development</h2> 
    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials