Você pode dar a qualquer elemento “cantos arredondados” aplicando um border-radiuspor meio de CSS. Você só notará se houver uma mudança de cor envolvida. Por exemplo, se o elemento tiver uma cor de fundo ou borda diferente do elemento que acabou. Exemplos simples:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Realmente não é mais necessário, mas para obter o melhor suporte de navegador possível, você pode prefixar com -webkit-e -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )Observe a ordem dessas propriedades: os prefixos do fornecedor são listados primeiro e a versão “spec” sem prefixo é listada por último. Esta é a maneira correta de fazer isso. O raio da borda é um exemplo particularmente bom de por que fazemos isso dessa maneira. Em uma versão um pouco mais complicada de uso border-radius(onde você passa dois valores em vez de um), o -webkit-prefixo do fornecedor mais antigo faria algo totalmente diferente do que a versão de “especificação”. Portanto, se copiarmos / colarmos cegamente os mesmos valores em todas as três propriedades, poderemos ver resultados diferentes no navegador cruzado. Saiba mais sobre este cenário. Para maior consistência a longo prazo, é melhor listar a versão de “especificação” por último.
É muito realista hoje em dia descartar prefixos e apenas usar border-radius, como discutido aqui.
Se o elemento tiver um fundo de imagem, ele será cortado no canto arredondado naturalmente:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Às vezes, você pode ver um background-color“vazamento” fora de uma borda quando border-radiusestá presente. (Vejo). Para evitar isso, você usa background-clip:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Com apenas um valor, border-radiusserá o mesmo em todos os quatro cantos de um elemento. Mas não precisa ser assim. Você pode especificar cada canto separadamente, se desejar:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Você também pode especificar dois ou três valores. MDN explica bem:
Se um valor for definido, esse raio se aplica a todos os 4 cantos .
Se dois valores são definidos, o primeiro se aplica a top-lefte bottom-rightcanto, a segunda se aplica a top-righte bottom-leftcanto.
Quatro valores aplicam-se a top-left, top-right, bottom-right, bottom-leftcanto, nessa ordem.
Três valores: o segundo valor se aplica a top-righte também bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Você também pode especificar os raios em que o canto é arredondado. Em outras palavras, o arredondamento não precisa ser perfeitamente circular, pode ser elíptico. Isso é feito usando uma barra (“/”) entre dois valores.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Observação: o Firefox só oferece suporte a bordas elípticas em navegadores WebKit 3.5+ e mais antigos (por exemplo, Safari 4) tratam incorretamente “40px 10px” como o mesmo que “40px / 10px”.
Você pode especificar o valor de border-radiusem porcentagens. Isso é particularmente útil quando se deseja criar uma forma de círculo ou elipse, mas pode ser usado sempre que desejar que o raio da borda seja diretamente correlacionado com a largura dos elementos.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Nota: No Safari, os valores percentuais para border-radius são suportados apenas em 5.1+. No Opera, compatível apenas com 11.5+.
Aqui está cada propriedade individual, com prefixos de fornecedor:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )Nota: Cada um desses valores também pode ter um valor separado por espaço, como “5px 10px”, que se comporta como um valor separado por barra abreviada (raio horizontal (espaço) raio vertical).
Recursos
- Ferramenta rápida para gerar código de raio de fronteira
- Mozilla Docs
- Em busca do raio perfeito
- Precisamos mais prefixar border-radius?
Aqui está uma coisinha para brincar com as diferentes propriedades e valores:
Veja o Pen All the border-radius 'de Chris Coyier (@chriscoyier) no CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |