Rounded corners on header image

Anonymous
September 17, 2012 at 11:07 am #5742

Hi,

Been using Graphene for a while now for various different sites and really like how customisable it is. However, have hit a problem and hope someone here might be able to point me in the right direction. I’ve googled and looked through the forums but can’t find anything relevant.

My client wants to have rounded corners on the top of the header image which I’ve done in Photoshop for the graphic with a transparent background, but I don’t know how to make the shadow fit around the corners – it goes vertically straight up to the top of the page.

Has anyone done this or knows how I should approach this?

Many thanks in advance,

Saph.

Mod

Kenneth John Odle
September 18, 2012 at 9:12 pm #32599

Quote:

I don’t know how to make the shadow fit around the corners – it goes vertically straight up to the top of the page.

That’s because the shadow doesn’t go around the header image—it goes on either side the content div.

I don’t know that there’s a way to accomplish what you want other than creating a faux shadow in Photoshop, but you’ll still have the shadow on the content div to deal with.

geoffsoz
September 28, 2012 at 12:35 pm #32600

Are you trying to round the header corners like it is done on one side here? if so I can tell how that it done, but I don;t know if that is what you are after,

Geoff

bonvic123
September 29, 2012 at 5:04 pm #32601

Quote:

Are you trying to round the header corners like it is done on one side here? if so I can tell how that it done, but I don;t know if that is what you are after,

Geoff

I would like to know how to do that. Thanks in advance!
geoffsoz
September 30, 2012 at 12:02 am #32602
There may be better ways as I’m just a beginner, but my findings are that you need to round both the header and the container – the shadow will then follow the container outline.
```
#header {

-moz-border-radius-topright: 50px;

-webkit-border-top-right-radius: 50px;

border-top-right-radius: 50px;

}

#container {

-moz-border-radius-topright: 50px;

-webkit-border-top-right-radius: 50px;

border-top-right-radius: 50px;

}
```
You would then need to copy these and change them to “top left” for the left side if required.

My understanding for having to have three statements for each is because each of the different browser engines need their own format.

Hope this helps

Geoff