I am trying to create background images with rounded corners and rough edges of

Question

0

Asked: May 23, 20262026-05-23T08:00:05+00:00 2026-05-23T08:00:05+00:00

I am trying to create background images with rounded corners and rough edges of

0

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?

Thanks,

Nick