Propriedade CSS border-top-style
A propriedade CSS border-top-style define o estilo da borda superior de um elemento. Veja todos os valores com exemplos.
A propriedade CSS border-top-style define o estilo de linha da borda superior de um elemento — se ela é desenhada como uma linha sólida, tracejada, com efeito 3D groove, entre outros.
Ela aceita uma única palavra-chave escolhida entre os mesmos valores disponíveis para o atalho border-style. A diferença está no escopo: border-style define o estilo dos quatro lados ao mesmo tempo, enquanto border-top-style afeta apenas a borda superior. As propriedades equivalentes para os outros lados são border-right-style, border-bottom-style e border-left-style.
Quando usar
Use border-top-style quando quiser que um lado tenha aparência diferente dos demais — por exemplo, um separador pontilhado acima de um rodapé, uma linha tracejada sobre um bloco "leia mais", ou uma linha sólida no topo de um card enquanto os outros lados ficam sem borda. Se precisar do mesmo estilo nos quatro lados, o atalho border-style é mais conciso.
Uma borda só é renderizada quando seu estilo está definido. Por padrão, border-top-style é none, portanto, mesmo que você defina uma cor ou largura para a borda superior, nada será exibido até que um estilo seja atribuído. A largura padrão de uma borda superior visível é medium; altere-a com border-top-width ou o atalho border-width, e defina sua cor com border-color.
A renderização não é idêntica em todos os navegadores. Por exemplo, o Chrome desenha bordas dotted como pequenos quadrados em vez de pontos redondos, e o espaçamento entre pontos e traços fica a cargo de cada motor de renderização.
A especificação não define a quantidade de espaçamento entre os pontos e os traços.
A especificação não define como bordas de estilos diferentes se conectam nos cantos.
| Valor Padrão | none |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herança | Não |
| Animável | Não |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderTopStyle = "dashed"; |
Sintaxe
Sintaxe da propriedade CSS border-top-style
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemplo da propriedade border-top-style:
Exemplo da propriedade CSS border-top-style com os valores dashed e dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2,
p {
padding: 15px;
border: solid #666;
}
h2 {
border-top-style: dashed;
}
p {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with dashed border-top-style.</h2>
<p>A paragraph with dotted border-top-style.</p>
</body>
</html>Dependendo do valor de border-color, os efeitos dos valores groove, ridge, inset e outset podem ser alterados.
Resultado
Exemplo da propriedade border-top-style com todos os valores de estilo:
Exemplo da propriedade CSS border-top-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: #1c87c9;
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: #c9c5c5;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-style example classes */
.b1 {
border-top-style: hidden;
}
.b2 {
border-top-style: dotted;
}
.b3 {
border-top-style: dashed;
}
.b4 {
border-top-style: solid;
}
.b5 {
border-top-style: double;
}
.b6 {
border-top-style: groove;
}
.b7 {
border-top-style: ridge;
}
.b8 {
border-top-style: inset;
}
.b9 {
border-top-style: outset;
}
</style>
</head>
<body>
<h1>Border-top-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>Os valores groove, ridge, inset e outset criam um efeito 3D falso clareando e escurecendo a border-color. Em um fundo solid ou de cor única, o efeito pode parecer quase plano — ele é mais visível com uma cor de tom médio e uma borda com pelo menos alguns pixels de espessura.
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 conflitos de borda 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 3D em groove. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| ridge | Define uma borda 3D em ridge. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| inset | Define uma borda 3D inset. Seu efeito pode ser alterado com o valor de border-color. | Experimente » |
| outset | Define uma borda 3D outset. 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. |
Propriedades relacionadas
- border-style — define o estilo dos quatro lados ao mesmo tempo.
- border-top — atalho para a largura, o estilo e a cor da borda superior.
- border-top-width — controla a espessura da borda superior.
- border-color — define a cor com que o estilo é desenhado.
- border-right-style, border-bottom-style, border-left-style — as propriedades equivalentes para cada lado.