Propiedad CSS border-top-style
La propiedad CSS border-top-style especifica el estilo del borde superior de un elemento. Consulta todos los valores con ejemplos.
La propiedad CSS border-top-style establece el estilo de línea del borde superior de un elemento: si se dibuja como una línea sólida, una línea discontinua, un surco 3D, etc.
Acepta una sola palabra clave elegida del mismo conjunto de valores disponibles para la abreviatura border-style. La diferencia está en el alcance: border-style establece el estilo de los cuatro lados a la vez, mientras que border-top-style afecta únicamente al borde superior. Las propiedades equivalentes para los demás bordes son border-right-style, border-bottom-style y border-left-style.
Cuándo usarla
Usa border-top-style cuando quieras que un borde tenga un aspecto diferente al resto; por ejemplo, un separador punteado sobre un pie de página, una línea discontinua sobre un bloque «leer más», o una línea sólida en la parte superior de una tarjeta mientras los demás lados permanecen sin borde. Si necesitas el mismo estilo en todos los lados, la abreviatura border-style es más corta.
Un borde solo se pinta cuando su estilo está definido. Por defecto, border-top-style es none, por lo que aunque establezcas un color o un ancho para el borde superior, no se mostrará nada hasta que asignes un estilo a ese borde. El ancho predeterminado de un borde superior visible es medium; cámbialo con border-top-width o la abreviatura border-width, y establece su color con border-color.
El renderizado no es idéntico en todos los navegadores. Por ejemplo, Chrome dibuja los bordes dotted como pequeños cuadrados en lugar de puntos redondos, y el espaciado entre puntos y guiones queda a criterio de cada motor.
La especificación no define la cantidad de espacio entre los puntos y los guiones.
La especificación no define cómo se conectan los bordes de distintos estilos en las esquinas.
| Valor predeterminado | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No |
| Animable | No |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderTopStyle = "dashed"; |
Sintaxis
Sintaxis de la propiedad CSS border-top-style
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Ejemplo de la propiedad border-top-style:
Ejemplo de la propiedad CSS border-top-style con los valores dashed y 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>Dependiendo del valor de border-color, los efectos de los valores groove, ridge, inset y outset pueden cambiar.
Resultado
Ejemplo de la propiedad border-top-style con todos los valores de estilo:
Ejemplo de la propiedad CSS border-top-style con los valores hidden, dotted, dashed, solid, double, groove, ridge, inset y 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>Los valores groove, ridge, inset y outset crean un efecto 3D falso aclarando y oscureciendo el border-color. Sobre un fondo solid o de un solo color, el efecto puede parecer casi plano; es más visible con un color de tono medio y un borde de al menos unos pocos píxeles de grosor.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| none | Define que no habrá ningún borde. Valor predeterminado. | Pruébalo » |
| hidden | Es igual a "none" excepto en la resolución de conflictos de bordes en elementos de tabla. | Pruébalo » |
| dotted | Define un borde punteado. | Pruébalo » |
| dashed | Define un borde discontinuo. | Pruébalo » |
| double | Define un borde doble. | Pruébalo » |
| solid | Define un borde sólido. | Pruébalo » |
| groove | Define un borde con surco 3D. Su efecto puede cambiar según el valor de border-color. | Pruébalo » |
| ridge | Define un borde con cresta 3D. Su efecto puede cambiar según el valor de border-color. | Pruébalo » |
| inset | Define un borde empotrado 3D. Su efecto puede cambiar según el valor de border-color. | Pruébalo » |
| outset | Define un borde saliente 3D. Su efecto puede cambiar según el valor de border-color. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
- border-style — establece el estilo de los cuatro lados a la vez.
- border-top — abreviatura para el ancho, el estilo y el color del borde superior.
- border-top-width — controla el grosor del borde superior.
- border-color — establece el color con el que se dibuja el estilo.
- border-right-style, border-bottom-style, border-left-style — las propiedades equivalentes para cada lado.