Free size rounded box (using 2 images)
Working around with rounded box for my current project and I just want to share it. It using two images:
Top bar
Bottom bar
(Generated by http://www.generateit.net/rounded-corner/)
The rounded box will has a max width as the width size of your image. For example, create image with width=600px and you can using it to create any box from size 10px to 600px width. The height is unlimited.
Css
.rbox .tl{ background:url("top bar image") no-repeat; height: 5px; margin: 0 5px 0 0; } .rbox .tr{ background:url("top bar image") no-repeat top right; height: 5px; margin: 0 -5px 0 5px; } .rbox .bl{ background:url("bottom bar image") no-repeat; height: 5px; margin: 0 5px 0 0; } .rbox .br{ background:url("bottom bar image") no-repeat top right; height: 5px; margin: 0 -5px 0 5px; } .rbox .content{ border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; background-color: #ffffff; }
HTML
Your content goes here
