CSS - Top left corner background image (curved)

I am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.

I am开发者_开发百科 using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.

I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.

If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:

(yes, the images are the correct size and colour)

The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.

Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.

If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.

There are two methods for creating round corners without using border-radius (CSS3) and without using images:

1. Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site: http://webdesign.about.com/od/css/a/aa072406.htm

2. Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.