Rounded corners technique with images around borders
Well you can do it with 3 divs.
<div class="bg"><div class="top"><div class="bot">text here</div></div></div>
bg
will have css like
background: url(path/to/repeated/background.gif) repeat-y;
If the background spans the entire width of the div, since it is constant. This will alternate the left and right sides.
And then above and below just use images with no-repeat top left;
and no-repeat bottom left
. Each of them will have 2 corners plus all the image qualities between them.
Hopefully you can fill in the details from this if you have a good enough understanding of CSS.
source to share
CSS3 properties for border images:
border-image: border-top-image border-right-image border-bottom-image border-left-image border-corner-image: border-top-left-image border-top-right-image border-bottom-left-image border-bottom-right-image
Example:
border-image: url (border.png) 27 27 27 27 round round;
Mozilla differs from IE, Chrome, Safari ie using properties starting with -moz , except for -webkit
Read more about these properties on these definitions and examples.
source to share