a single rounded side
Posted: 01 April 2008 01:59 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2008-04-01

Hi,
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:

Profile
 
 
Posted: 01 April 2008 06:35 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  15
Joined  2006-09-07

It’s hard to tell what you’re trying to accomplish here. An image of the full mockup would be helpful, bet let me give it a shot….


Let’s say your sidecolumn div ID tag is called ‘sideCol’ then your CSS will look similiar to this:

#sideCol{
background-image:url('insert directory path of your image file here');
background-position:top right;
background-repeat:no-repeat;
background:#fff;
width:100px;
height:100px;

Ofcourse it gets a little more complicated than that. Just fyi..make sure the height of your div tag is wider adn taller than the image you’re referencing so it will render properly.

You can also use the following css rules to position background images:

background-position:relative;
top:?
left:?
right:? 


Let me us know if you need anymore help.

Profile