CSS3 propriedade border-radius
Exemplos
Div elemento para adicionar bordas arredondadas:
{
border:2px solid;
border-radius:25px;
}
tente »
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
propriedade | |||||
---|---|---|---|---|---|
border-image | 4.0 -webkit- | 9 | 4.0 -moz- | 5.0 -webkit- | 10,5 -o- |
Atributo definições e instruções
propriedade border-radius é um possível especificar até quatro fronteira - * - propriedades raio das propriedades compostas
Nota: Esta propriedade permite adicionar elementos fronteiras arredondadas!
padrão: | 0 |
---|---|
herança: | não |
versão: | CSS3 |
sintaxe JavaScript: | objeto object.style.borderRadius = "5px" |
gramática
Nota: A ordem dos quatro valores de cada raio são: canto superior esquerdo, superior direito, canto inferior direito, canto inferior esquerdo.Se você omitir o canto inferior esquerdo, no canto superior direito é o mesmo. Se você omitir o canto inferior direito, canto superior esquerdo é o mesmo. Se você omitir o canto superior direito, canto superior esquerdo é o mesmo.
值 | 描述 |
---|---|
length | 定义弯道的形状。 |
% | 使用%定义角落的形状。 |
exemplo 1
é equivalente a:
border-top-left-radius: 2em;
border-top-right-radius: 2em;
-Border-bottom-rádio direito: 2em;
-Border-bottom left-radius: 2em;
exemplo 2
é equivalente 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;
artigos relacionados
CSS3 tutorial: Border CSS3