Create tiled border on left, bottom, right - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-bottom

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-bottom

Description

Create tiled border on left, bottom, right

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.container {<!--from  ww  w .  j a v a  2 s .  c om-->
   position:   relative;
   padding:    5px;
   background: #999;
}
.container .left {
   position:   absolute;
   left:       0;
   top:        0;
   background: #00f repeat-y;
   width:      5px;
   height:     100%;
}
.container .right {
   position:   absolute;
   right:      0;
   top:        0;
   background: #f00;
   width:      5px;
   height:     100%;
}
.container .bot {
   position:   absolute;
   left:       0;
   bottom:     0;
   background: #0f0;
   width:      100%;
   height:     5px;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="left"></div> 
   <div class="right"></div> 
   <div class="bot"></div> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh nulla, lacinia vitae aliquam quis, congue laoreet libero. Ut eget urna et tortor condimentum pharetra in eget justo. Mauris pellentesque dignissim odio, ut cursus elit suscipit at. Aenean enim diam, cursus nec placerat sit amet, sagittis quis risus. Nam quis viverra dolor. Nulla lectus mauris, posuere at lacinia in, iaculis et mauris. Duis dui libero, volutpat et molestie id, mattis at turpis. Donec id eros eget mi consequat pharetra vel luctus metus. Pellentesque vitae lacus tortor. Sed tristique diam urna, ut posuere quam. Nam congue lorem libero, sollicitudin ornare mi. Integer vel quam in arcu congue adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin a molestie diam. Etiam at quam tellus, vel hendrerit ante. Vestibulum quam diam, malesuada eget rutrum sed, auctor a dui. Pellentesque dignissim augue quis nulla congue sit amet lobortis velit convallis. Aenean ut placerat justo. Nam scelerisque dictum turpis et consequat. Praesent mattis arcu at sapien feugiat fringilla. Mauris facilisis ante quis ligula blandit varius. Ut neque purus, sagittis sit amet tincidunt a, ultrices tempor nisl. Curabitur lorem justo, fermentum id adipiscing vitae, pulvinar vel diam. In hac habitasse platea dictumst. Fusce rhoncus dignissim consectetur. </p> 
  </div>  
 </body>
</html>

Related Tutorials