Propriedade de estilo borderColor
Exemplo
Altere a cor das quatro bordas de um elemento <div> para vermelho:
document.getElementById("myDiv").style.borderColor = "red";
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade borderColor define ou retorna a cor da borda de um elemento.
Esta propriedade pode assumir de um a quatro valores:
- Um valor, como: p {border-color: red} - todas as quatro bordas serão vermelhas
- Dois valores, como: p {border-color: red transparent} - as bordas superior e inferior serão vermelhas, as bordas esquerda e direita serão transparentes
- Três valores, como: p {border-color: red green blue} - borda superior será vermelha, borda esquerda e direita será verde, borda inferior será azul
- Quatro valores, como: p {border-color: red green blue yellow} - a borda superior será vermelha, a borda direita será verde, a borda inferior será azul, a borda esquerda será amarela
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintaxe
Retorne a propriedade borderColor:
object.style.borderColor
Defina a propriedade borderColor:
object.style.borderColor = "color|transparent|initial|inherit"
Valores de propriedade
| Value | Description |
|---|---|
| color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
| transparent | The color of the border is transparent (underlying content will shine through) |
| 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: | cor atual |
|---|---|
| Valor de retorno: | Uma String, representando a cor da borda de um elemento |
| Versão CSS | CSS1 |
Mais exemplos
Exemplo
Altere a cor da borda superior e inferior para verde e da borda esquerda e direita para roxo, de um elemento <div>:
document.getElementById("myDiv").style.borderColor = "green purple";
Exemplo
Retorna a cor da borda de um elemento <div>:
alert(document.getElementById("myDiv").style.borderColor);
Páginas relacionadas
Tutorial CSS: borda CSS
Referência CSS: propriedade border-color
Referência HTML DOM: propriedade border