Propriedade CSS border-top-width
A propriedade border-top-width define a largura da borda superior de um elemento. Veja todos os valores com exemplos ilustrados.
A propriedade CSS border-top-width define a largura (espessura) da borda superior de um elemento. Ela controla apenas a borda superior, sendo útil quando você deseja uma borda superior mais grossa ou mais fina do que os outros três lados — por exemplo, uma linha de destaque espessa acima de um cartão ou seção.
Você pode definir a largura da borda superior de duas maneiras:
- Diretamente, com a propriedade detalhada
border-top-width, quando apenas a borda superior difere. - Como parte de uma abreviação, usando border ou border-width, quando você deseja definir vários lados ao mesmo tempo.
border-top-width só tem efeito visível quando um estilo de borda está definido. Por padrão, o estilo de borda é none, o que significa que uma borda de qualquer largura não renderiza nada. Portanto, você deve primeiro declarar um estilo com border-style ou border-top-style, e esse estilo não deve ser none ou hidden.
/* Without a style the width is ignored — nothing shows */
.box {
border-top-width: thick; /* has no effect on its own */
}
/* Add a style and the width becomes visible */
.box {
border-top-style: solid;
border-top-width: thick;
}As propriedades irmãs border-right-width, border-bottom-width e border-left-width funcionam da mesma maneira para as outras bordas.
A especificação não define a espessura exata de cada palavra-chave. No entanto, elas sempre seguem a seguinte ordem: thin ≤ medium ≤ thick.
A especificação não define como bordas de diferentes estilos e larguras se conectam nos cantos.
| Valor Inicial | medium |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Sim. A largura da borda é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderTopWidth = "5px"; |
Sintaxe
Sintaxe da propriedade CSS border-top-width
border-top-width: medium | thin | thick | length | initial | inherit;Exemplo da propriedade border-top-width:
Exemplo da propriedade CSS border-top-width com o valor thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
border-style: dotted;
border-top-width: thick;
}
</style>
</head>
<body>
<h2>Border-top-width example</h2>
<p>As you can see the width of the top border is set to thick.</p>
</body>
</html>Resultado
![Propriedade CSS border-top-width](https://api.w3docs.com/uploads/media/default/0001/03/ff5db94a745edc3bcb963c80df1284fa352d4278.png "border-top-width set to thick on a dotted paragraph" =420x)
Exemplo da propriedade border-top-width com todos os valores:
Exemplo da propriedade CSS border-top-width com os valores medium, thin, thick, initial e inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
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;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-width example classes */
.b1 {
border-top-width: medium;
}
.b2 {
border-top-width: thin;
}
.b3 {
border-top-width: thick;
}
.b4 {
border-top-width: 10px;
}
.b5 {
border-top-width: initial;
}
.b6 {
border-top-width: inherit;
}
</style>
</head>
<body>
<h1>Border-top-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Valores
| Valor | Descrições | Experimente |
|---|---|---|
| medium | Define uma borda superior média. É o valor padrão desta propriedade. | Experimente » |
| thin | Define uma borda superior fina. Cabe ao agente de usuário determinar a largura exata. | Experimente » |
| thick | Define uma borda superior grossa. Cabe ao agente de usuário determinar a largura exata. | Experimente » |
| length | Define a espessura da borda superior (por exemplo, 10px, 5em, 8pt). Valores percentuais não são suportados. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Palavras-chave vs. valores de comprimento
Você pode expressar a largura com uma das três palavras-chave (thin, medium, thick) ou como um comprimento explícito. As palavras-chave são convenientes, mas vagas: a especificação CSS não define um tamanho exato em pixels para elas, apenas a ordem thin ≤ medium ≤ thick. A maioria dos navegadores as renderiza como aproximadamente 1px, 3px e 5px, mas você não deve depender disso.
Use um comprimento explícito (1px, 0.25em, 3pt) sempre que precisar de uma espessura previsível e consistente entre os navegadores. Note que percentagens não são permitidas para larguras de borda, e comprimentos negativos são inválidos.
Pontos de atenção
- Nenhuma borda visível sem um estilo. O erro mais comum é definir apenas a largura e esquecer o
border-top-style. Com o estilo padrãonone, a borda simplesmente não é renderizada. initialvs.inherit.initialredefine a largura para seu valor padrão especificado (medium), enquantoinheritcopia a largura calculada do elemento pai.- A largura afeta o layout. Uma borda mais larga aumenta o tamanho renderizado do elemento, a menos que box-sizing seja definido como
border-box, que mantém a largura/altura declarada fixa e absorve a borda internamente. - Cantos. A especificação não define como bordas de diferentes larguras ou estilos se unem em um canto, então uma borda superior grossa encontrando uma borda lateral fina pode parecer ligeiramente diferente entre os navegadores.