Rounded corners technique with images around borders
Does anyone know a good example of using CSS to create a rounded rectangle where:
- All 4 corners and 4 sides are an image. Parties reiterated
img
- The width is constant and the height is flexible.
- Work in FF 3.x, IE 7 or higher, Chrome
Tell me. Thanks to
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.
I do not know of such codes. But I know the best code for css rounded corners without images.
Look at the link
It works across all browsers and is easy to implement. The great thing is that it works well in ie6! .. Great na ..
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.
Source1 , src2