Advanced Search

css elastic rounded border

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. css corner
  2.  
  3. /** rounded corners **/
  4.  
  5. /* curved */
  6. .bl { background: url(../images/j_crn_bl_light.png) 0 100% no-repeat;}
  7. .br { background: url(../images/j_crn_br_light.png) 100% 100% no-repeat;}
  8. .tl { background: url(../images/j_crn_tl_light.png) 0 0 no-repeat; }
  9. .tr { background: url(../images/j_crn_tr_light.png) 100% 0 no-repeat;}
  10. .bt { background:url(../images/j_border.png) 0 0 repeat-x; }
  11. .dl{ background:url(../images/mw_line_grey.png) 0 0 repeat-y;}
  12. .dr { background:url(../images/mw_line_grey.png) 100% 100% repeat-y;}
  13. .bb { background:url(../images/j_border.png) 0 100% repeat-x; }
  14.  
  15. /* header red background curved */
  16.  
  17.  
  18.  
  19. HTML 
  20.  
  21.  
  22. <div class="bb"> <div class="dl"><div class="bl"><div class="dr"><div class="br"><div class="bt"><div class="tl"><div class="tr">
  23.  
  24. <!-- search -->
  25.  		<span> Text here</span><br /><br />
  26.  
  27.                  text here text here  
  28.  </div></div></div></div></div></div></div></div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.