How tomake top menu buttons round in all 4 corners

Hello,

I'm using hot arquitecture in one site but my boss want all the 4 corners round and even they would be rounder than are in your original template.

I find how to make them rounder in this lines of template_css.css:

#nav > li {
float:left;
position:relative;
margin:0 10px 0 0;
height:50px;
-moz-border-radius-topleft:12px;
-webkit-border-top-left-radius:12px;
-moz-border-radius-topright:12px;
-webkit-border-top-right-radius:12px;
border-radius: 12px 12px 0 0;
behavior: url(templates/hot_architecture/css/PIE.php);

But I can't fin how to make round the bottom corners of the top menu, I tried adding:

-moz-border-radius-bottomleft:12px;
-webkit-border-bottom-left-radius:12px;
-moz-border-radius-bottomright:12px;
-webkit-border-bottom-right-radius:12px;

But nothing happens.

Could you help me in this trouble?

I'm sending an image showing what I mean.

My URL is: cfd2.gvamundial.com.mx/prueba2/

Thanks in advance.

Susana Garduño

Hi Susana,

These top menu items are styled as tabs, so I don't think you should make the bottom corners rounded. However, you can do it if you change, in example:

border-radius: 12px 12px 0 0;

to

border-radius: 12px;

In addition, to keep compatibility with older Firefox and Chrome versions, you can change everywhere "-moz-border-radius-topleft:" to "-moz-border-radius:" and "-webkit-border-radius-topleft:" to "-webkit-border-radius:", but this is not necessary.

Thanks
Milos