Rounded corner box technique with images all around as borders

Question

Does anyone know good example of using CSS to create rounded corner box where:

1. All 4 corners and 4 sides are image. The sides have repeated img
2. The width is constant while height is flexible
3. Work all in FF 3.x, IE 7 or higher, Chrome

Let me know. Thanks

Answer 1

Hi,

I haven't know any such codes. But i know a best code for css rounded corners without images.

Check out this link

Its work in all browsers and easy to implement. The great thing is it works well in ie6!..Great na..

Answer 2

Well, you can do it with 3 divs.

<div class="bg"><div class="top"><div class="bot">text here</div></div></div>

bg would have css like

background: url(path/to/repeated/background.gif) repeat-y;

Where the background spans the entire width of the div, since it's constant. That will tile both your left and right sides.

And then for the top and bottom just use images with no-repeat top left; and no-repeat bottom left. They would each have 2 corners plus all the imagey goodness inbetween.

Hopefully you can fill in the details from that if you have a good enough understanding of CSS.

Answer 3

CSS3 properties for border images are as follows:

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 i.e using properties starting with -moz other than -webkit

For more explanation about these properties please look at these definitions and examples.

Source1, Source2