Atributo border-radius CSS

Definição e uso

A propriedade border-radius é uma propriedade abreviada que define as quatro propriedades border-*-radius.

Dica:Essa propriedade permite que você adicione bordas arredondadas aos elementos!

Veja também:

Tutorial do CSS3:Bordas do CSS3

Exemplo

Adicionar borda arredondada ao elemento div:

div
{
border:2px solid;
border-radius:25px;
}

Experimente você mesmo

Mais exemplos na parte inferior da página.

Sintaxe do CSS

border-radius: 1-4 length|% / 1-4 length|%;

Notas:Definir as quatro valores de cada radii nessa ordem. Se omitir bottom-left, ele será o mesmo que top-right. Se omitir bottom-right, ele será o mesmo que top-left. Se omitir top-right, ele será o mesmo que top-left.

Valor da propriedade

Valor Descrição Teste
length Definir a forma da borda arredondada. Teste
% Definir a forma da borda arredondada em porcentagem. Teste

Exemplo 1

border-radius:2em;

equivale a:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Exemplo 2

border-radius: 2em 1em 4em / 0.5em 3em;

equivale a:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Detalhes técnicos

Valor padrão: 0
Herança: não
Versão: CSS3
Sintaxe do JavaScript: object.style.borderRadius="5px"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5