Round Navigation and Module Borders

[Eric Bersen]

How do you round navigation and mudule borders?

[soaringeagle]

border-radoius: 50px etc

but you should include  other browser compatability codes

-moz-border-radius

-webkit-border-radius

etc

 if you use 1 number 50px it applies to all corners

u can use diferent numbers for each corner for non symwtrical shapes

ex border-radius: 5px 12px 20px 60px;

that would be top left ti[op right bottom right bottom left it goes clockwise around

[Elson Tan]

1.You can do it using CSS

2.Get the element id/class of the element you want to have rounded border corners

3.Use this generator to help you generate cross-browser rounded border corners code:

http://border-radius.com/

For example:

#xg_navigation{

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

Please note Ineternet Explorer dosent supports rounded border corners.

[Bernard Lama]

That's right Elson.. and for module  just replace this .xg_theme .xg_module instead of  this #xg_navigation

[Eric Bersen]

Thanks, this is great.  It seems to generally work, but there are a few places I have questions... how do you round the top left and right corner?  On a few modules, the rounded bottom left and right corners look broken after I enter the css

[Eric Bersen]

The top left of the canvas corner curve exposes a transparent layer?

[Eric Bersen]

[Bernard Lama]

replace this..

.xg_module_body

[Kos]

ok question:  I used this and it works fine in old editor but not in Design Studio.   Why?  Firebug shows the same element ".xg_module_head"

.xg_module_head{

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}

BTW a huge THANK YOU guys for all of the assistance.  Very, very much appreciated.