Take the 2-minute tour ×

I am trying to create background images with rounded corners and rough edges of variable width and height for several DIVs of different width/height.

You can see an example of the kind of image I mean on a webpage in development here.

The way of doing this that makes most sense to me is to design an image in Photoshop then splice two sections, a 20px by 20px section for the corners, and a 20px by 200px section for the sides. The idea then would be to reuse these images, rotated by 90, 180 and 270 degrees, to minimise the number of images needed. Then I would create a DIV subdivided into sections. These sections would correspond to the size of the corners, and would each have a background URL of the image of the corners (3 rotated), or would be of varying width or height for the side sections, i.e. 20px by whatever. If the width/height of these DIVs is longer than 200px then the background image would be repeated. Obviously I will need to pay attention to how the corner sections join the side sections, and this may not always be a perfect join, because of the roughness of the edges, but I'm hoping that because it's rough it won't matter too much! The DIV/section in the centre of the image would just have a solid background colour as the whole image just uses one colour.

So, I am wondering if this is indeed the best way of going about this, and if not, what is. And if it is, how would I handle rotating the corners/side sections. I don't think there's a background property that can do this. Would this be a task for javascript?



share|improve this question

1 Answer 1

up vote 0 down vote accepted

I have just answered about a very similar question a minute ago: Charcoal/mock up like border effect with CSS3

You can probably achieve this effect with CSS3's border-image property.

You can see some samples here: http://www.css3.info/preview/border-image/

and here: http://css-tricks.com/2010/07/understanding-border-image-6883

share|improve this answer
Thanks, I will look into this. As I understand it though, border-image property doesn't work in IE. So, I am wondering if it would be best to work on a cross-browser solution, or use border-image property with a fallback for IE, and if so, what fallback for IE? –  Nick Jun 19 '11 at 12:04
maybe this will help: stackoverflow.com/questions/3567501/… –  Variant Jun 19 '11 at 12:11
Thanks. I am now using border-property. I couldn't get the IE version working, so am using alternative CSS styling for IE –  Nick Jul 29 '11 at 13:08

Your Answer


