Border radius
A propriedade CSS3 border-radius destina-se a definir bordas arredondadas. O arredondamento das bordas é feito com declaração de dois valores CSS de medida; o primeiro define o eixo horizontal (rx) de 1/4 de uma elipse e o segundo o eixo vertical (ry). O quarto de elipse assim definida é convenientemente inserida no canto vivo do box arredondando-o. O diagrama a seguir esclarece o esquema de arredondamento.
A sintaxe geral para aplicar borda arredondada é mostrada a seguir.
seletor {border-radius:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?);
}
ou
seletor {
border-top-left-radius: rx ry;
border-top-right-radius: rx ry;
border-bottom-right-radius: rx ry;
border-bottom-left-radius: rx ry;
}