CSS Rounded Borders Help

[Omicron]

Hi! Im just new here and I need a little help. I am trying to make the banner part of my webpage to look like the top of a folder. It would look like this:
But mine is like this:
http://img835.imageshack.us/img835/6053/12345xf.jpg Please check the link.

Thanks!
– Omicron

[Omicron]

Whoops! Looks like the one I made to look like a folder got messed up…

[Dreamdealer]

Can you post any CSS and/or HTML code?

[Omicron]

Here:

#banner{

background-color:#FFFF99;

width:100%;

height:126px;

-moz-border-radius-topleft:40px;

-webkit-border-top-left-radius:40px;

}



#banner #left{

width:55%;

height:126px;

float:left;

-moz-border-radius-topleft:40px;

-webkit-border-top-left-radius:40px;

}



#banner #right{

width:43%;

height:126px;

float:right;

}



#banner #right #upper{

background-color:#FFFFFF;

height:55%;

width:100%;

}



#banner #right #lower{

background-color:#FFFF99;

height:45%;

width:100%;

}

[Brightonmike]

I don’t understand the problem. It’s doing exactly what it’s supposed to.

[Tcooper]

Brightonmike is right, what were you expecting it to do?

If you wanted the corners you have circled to be rounded I suggest taking a look at the properties you’ve used -moz-border-radius-topleft:40px;
-webkit-border-top-left-radius:40px;

[Dreamdealer]

I think he wants a rounded corner on the top right too. He might try something like:

border-radius: 40px 40px 0px 0px;

[Omicron]

I want it to look like a folder.
Top Left of the whole banner is rounded.
Top right of banner part 1 (left) is rounded.
Top right of banner part 2 (right) lower is rounded

[joshuanhibbert]

Like this? http://jsfiddle.net/sl1dr/Er6VS/

EDIT: Now with opening effect on hover. Why you ask? Why not?

[Omicron]

Can you remove the hover effect? Just make it a normal looking folder.
EDIT:
I just need the top part of the folder. Not the whole one.

EDIT2:
Problem fixed.

[Author]

Posts