CSS3 – Bordas Arrendondadas
Por muito tempo para utilizarmos bordas arredondadas tínhamos que utilizar imagens, o que nunca foi uma boa saída. Com CSS 3 chegou uma solução bem mais robusta, o border-radius
que funciona em praticamente todos os browsers, utilizando diferentes declarações. O IE não possui nenhum suporte a bordas arrendondadas, mas a Microsoft já declarou que o IE9 terá suporte.
Como ainda não existe compatibilidade é recomendada a utilização da prorpiedade somente para fins estéticos onde não irá afetar a usabilidade do site, então atenção ao utilizá-la.
A declaração oficial para bordas arrendondadas é radius-border
, mas existem declarações derivadas que veremos mais adiante.
border-radius:10px;
Como as propriedades margin
e padding
podemos definir valores diferentes para cada canto:
border-radius: 10px 20px;
border-radius: 10px 20px 30px 40px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
Também temos as declarações derivadas a seguir;
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
Com o tempo os browsers irão utilizar a declaração oficial do W3C
e não será mais necessário a utilização das declarações derivadas.
Bom era isso até mais e obrigado pelos peixes!