Web: Divs com bordas arredondadas no Firefox, Chrome, Opera e Safari

  • Post author:
  • Post category:Sem categoria

Você já deve ter percebido que cada navegador trata os estilos de bordas arredondas de forma diferente não ? Bom se a ideia é utilizar borda arredondas de forma que funcione em todos os principais navegadores como Firefox 3x, Safari 4/5, Opera e Chrome utilize o exemplo abaixo:

Declare o exemplo abaixo em seu CSS

.centro_int
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

}

Onde -moz-border-radius especifica o estilo de arredondamento de 5px no Firefox e -webkit-border-radius especifica o estilo para Chrome e Safari

Veja as especificações de utilização das bordas arredondadas para a engine Gecko e Webkit:

W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Webkit

webkitborder-radius
webkitborder-top-left-radius
webkitborder-top-right-radius
webkitborder-vertical-spacing