Clever Geek Handbook

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 reiteratedimg

  • The width is constant and the height is flexible.
  • Work in FF 3.x, IE 7 or higher, Chrome

Tell me. Thanks to

+2


source to share


3 answers


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.

+2


source


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 ..

0


source


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

0


source






More articles:


All Articles