Propriedade CSS border-right-style
A propriedade CSS border-right-style define o estilo da borda direita de um elemento. Veja todos os valores com exemplos ilustrados.
A propriedade CSS border-right-style define o estilo de linha da borda direita de um elemento, como solid, dashed ou dotted. O valor é uma única palavra-chave escolhida do mesmo conjunto disponível para o shorthand border-style — a diferença é que border-style estiliza os quatro lados de uma vez, enquanto border-right-style tem como alvo apenas a borda direita.
Esta é a contraparte por lado de border-style. Use-a quando quiser um estilo de linha diferente no lado direito em relação aos outros lados — por exemplo, um divisor sólido à direita de uma barra lateral enquanto o topo, a base e a esquerda permanecem sem borda.
Por que a borda pode não aparecer
Uma borda tem três partes independentes: style, width e color. O style é a única parte obrigatória — se você não definir um estilo, o navegador usa o valor padrão none e a borda não é desenhada, independentemente da largura ou cor que você definir. Portanto, border-right-style é o que realmente torna a borda direita visível.
A largura padrão da borda direita é medium. Ajuste-a com border-right-width ou border-width, e defina sua cor com border-right-color. Para definir estilo, largura e cor em uma única declaração, use o shorthand border-right.
Nem todos os navegadores renderizam os estilos de forma idêntica. O Chrome, por exemplo, renderiza pontos dotted como pequenos quadrados em vez de círculos, e o espaçamento exato entre pontos e traços fica a critério do navegador.
A especificação não define a quantidade de espaço entre os pontos e os traços.
A especificação não define como bordas de estilos diferentes se conectam nos cantos.
| Valor inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Não |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderRightStyle = "dashed"; |
Sintaxe
Sintaxe da propriedade CSS border-right-style
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemplo da propriedade border-right-style:
Exemplo da propriedade CSS border-right-style com os valores solid e dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-right-style: solid;
}
p {
border-right-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with solid border-right-style.</h2>
<p>A paragraph with dotted border-right-style.</p>
</body>
</html>Veja um exemplo em que todos os valores de estilo são utilizados para observar a diferença entre eles:
Dependendo do valor de border-color, os efeitos dos valores groove, ridge, inset e outset podem ser alterados.
Exemplo da propriedade border-right-style com todos os valores:
Exemplo da propriedade CSS border-right-style com os valores hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #1c87c9;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-style example classes */
.b1 {
border-right-style: hidden;
}
.b2 {
border-right-style: dotted;
}
.b3 {
border-right-style: dashed;
}
.b4 {
border-right-style: solid;
}
.b5 {
border-right-style: double;
}
.b6 {
border-right-style: groove;
}
.b7 {
border-right-style: ridge;
}
.b8 {
border-right-style: inset;
}
.b9 {
border-right-style: outset;
}
</style>
</head>
<body>
<h1>Border-right-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Resultado
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Define que não haverá borda. Valor padrão. | Experimente » |
| hidden | É igual a "none", exceto na resolução de conflito de bordas em elementos de tabela. | Experimente » |
| dotted | Define uma borda pontilhada. | Experimente » |
| dashed | Define uma borda tracejada. | Experimente » |
| double | Define uma borda dupla. | Experimente » |
| solid | Define uma borda sólida. | Experimente » |
| groove | Define uma borda com efeito 3D ranhurado. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| ridge | Define uma borda com efeito 3D em relevo. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| inset | Define uma borda com efeito 3D encaixado. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| outset | Define uma borda com efeito 3D projetado. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
none vs hidden
As duas palavras-chave parecem iguais em um elemento normal — ambas não desenham nenhuma linha. A diferença só importa em tabelas com bordas colapsadas: com border-collapse: collapse, uma borda hidden vence na resolução de conflito de bordas e suprime a borda da célula vizinha, enquanto none tem a prioridade mais baixa e é substituída por qualquer borda adjacente.
Propriedades relacionadas
- border-right — shorthand para a largura, o estilo e a cor da borda direita.
- border-right-width e border-right-color — as outras duas partes da borda direita.
- border-style — define o estilo de linha dos quatro lados de uma vez.