Exemplo
Adicionar uma borda arredondada para o canto superior esquerdo de um <div> elemento:
div
{
border: 2px solid;
border-top-left-radius: 2em;
}
Tente você mesmo " Definição e Uso
A propriedade border-top-left-raio define a forma da borda do canto superior esquerdo.
Tip: Esta propriedade permite adicionar bordas arredondadas para elementos!
| Valor padrão: | 0 |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.borderTopLeftRadius="25px" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| border-top-left-radius | 5 4.0 -webkit- | 9 | 4.0 3.0 -moz- | 5 3.1 -webkit- | 10.5 |
CSS Syntax
border-top-left-radius:length|%[length|%]|initial|inherit;Note: Os dois valores de comprimento ou percentuais das propriedades border-top-left-radius definir o raio de um quarto de elipse que define a forma do canto da borda borda externa. O primeiro valor é o raio horizontal, segundo o raio vertical. Se o segundo valor for omitido ele é copiado a partir do primeiro. Se qualquer comprimento é zero, o canto é quadrado, não arredondado. Percentagens para o raio horizontal referem-se a largura da caixa de fronteira, enquanto que percentagens para o raio vertical, referem-se a altura da caixa de fronteira.
Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| length | Define a forma do canto superior esquerdo | Jogue " |
| % | Define a forma do canto superior esquerdo em% | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 Fronteiras
HTML DOM de referência: borderTopLeftRadius property