Propriedade de estilo borderRadius
Exemplo
Adicione bordas arredondadas a um elemento div:
document.getElementById("myDIV").style.borderRadius = "25px";
Definição e uso
A propriedade borderRadius é uma propriedade abreviada para definir ou retornar as quatro propriedades borderRadius.
As quatro propriedades do raio da borda são (nesta ordem):
bordaTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius
Dica: Esta propriedade permite adicionar cantos arredondados aos elementos!
Suporte ao navegador
Property | |||||
---|---|---|---|---|---|
borderRadius | Yes | 9.0 | Yes | Yes | Yes |
Sintaxe
Retorne a propriedade borderRadius:
object.style.borderRadius
Defina a propriedade borderRadius:
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
Nota: Os quatro valores para cada raio são fornecidos na ordem superior-esquerda, superior-direita, inferior-direita, inferior-esquerda. Se o canto inferior esquerdo for omitido, é o mesmo que o canto superior direito. Se o canto inferior direito for omitido, é o mesmo que o canto superior esquerdo. Se o canto superior direito for omitido, é o mesmo que o canto superior esquerdo.
Valores de propriedade
Value | Description |
---|---|
length | Defines the shape of the corners. Default value is 0 |
% | Defines the shape of the corners in % |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
Valor padrão: | 0 |
---|---|
Valor de retorno: | Uma String, representando a propriedade border-radius de um elemento |
Versão CSS | CSS3 |
Páginas relacionadas
Referência CSS: propriedade border-radius