How do i make a single side with rounded corners? I am trying to design a site with a rhs navigational menu. I have used two divs, one bigger as the main content and the other smaller floated to right. I want the bigger div to have rounded corners on its right side with the border from the top rounded corner stretching down to meet the bottom rounded corner. A crude example is as shown below:
Can anybody help me out?
it came out all wrong
it came out all wrong :blushing: sorry...attaching the image file
For a flexible box, you'll
For a flexible box, you'll need two images - one for the top, and one for the bottom. The top image should be just the top right corner, and as short as possible, and NOT have a transparent background. The bottom image should be really really ridiculously tall, so as to accommodate any amount of text that might go in the box.
Use CSS to set the bottom image as the background image for the background image on the bigger div. Then find a "hook" for your top image - some piece of content at the top of the contents of your big div. I generally use a header for this - style this element with the top image as the background image, and add a little top padding and left and right margin. For the rest of the contents of your big div, add some left and right margin.
I hope that helps. But that all together and show us how it turns out.
Show us any code you have.
Show us any code you have. I'm finding it hard to visualise what you are trying to do.
EDIT: Sorry Katie I didn't notice you had posted.