Referencia de CSS

Propiedad border-top-style

DefiniciónEstablece el estilo del borde superior de los elementos
Valores
permitidos
Uno y sólo uno de los siguientes valores:
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • inherit
Valor inicialnone
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-border-top-style

Ejemplos de uso

La propiedad border-top-style permite establecer el estilo del borde superior de un elemento. El estándar CSS 2 sólo permite utilizar los tipos de borde predefinidos, por lo que no se pueden hacer bordes curvados ni utilizar imágenes para crear bordes avanzados.

El significado de cada uno de los estilos de borde se explica en la siguiente tabla:

Valor Descripción
none No se muestra ningún borde. Como se trata del valor por defecto de esta propiedad, ningún elemento muestra un borde superior a menos que se establezca de forma explícita
hidden Visualmente es idéntico a none, ya que provoca que no se muestre ningún borde. Su única diferencia es la forma en la que el navegador resuelve los conflictos entre bordes adyacentes de las celdas de las tablas
dotted Borde punteado, formado por una serie de puntos separados por espacios
dashed Borde discontinuo, formado por una serie de pequeños trazos intercalados por espacios
solid Borde continuo, formado por una línea recta continua
double Borde doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco
groove Borde hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla
ridge Borde saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla
inset Borde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla
outset Borde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla

La especificación oficial define los diferentes estilos que se pueden aplicar, pero no detalla el aspecto que deben tener. De esta forma, existen diferencias notables en el aspecto con el que los navegadores muestran cada estilo de borde.

En el siguiente ejemplo se muestran todos los estilos de borde con una anchura de 1px y con una anchura de 4px. Prueba a ver esta página en diferentes navegadores y podrás apreciar diferencias importantes sobre todo en los estilos groove y ridge:

div { border-top-style: none; border-top-width: 1px; }
div { border-top-style: hidden; border-top-width: 1px; }
div { border-top-style: dotted; border-top-width: 1px; }
div { border-top-style: dashed; border-top-width: 1px; }
div { border-top-style: solid; border-top-width: 1px; }
div { border-top-style: double; border-top-width: 1px; }
div { border-top-style: groove; border-top-width: 1px; }
div { border-top-style: ridge; border-top-width: 1px; }
div { border-top-style: inset; border-top-width: 1px; }
div { border-top-style: outset; border-top-width: 1px; }
div { border-top-style: none; border-top-width: 4px; }
div { border-top-style: hidden; border-top-width: 4px; }
div { border-top-style: dotted; border-top-width: 4px; }
div { border-top-style: dashed; border-top-width: 4px; }
div { border-top-style: solid; border-top-width: 4px; }
div { border-top-style: double; border-top-width: 4px; }
div { border-top-style: groove; border-top-width: 4px; }
div { border-top-style: ridge; border-top-width: 4px; }
div { border-top-style: inset; border-top-width: 4px; }
div { border-top-style: outset; border-top-width: 4px; }

En el ejemplo anterior, como sólo se establece uno de los cuatro bordes, no es posible comprobar el efecto tridimensional de los estilos más avanzados. El siguiente ejemplo muestra los cuatro bordes de los elementos con los estilos groove, ridge, inset y outset:

div { border: 1px groove; }
div { border: 1px ridge; }
div { border: 1px inset; }
div { border: 1px outset; }
div { border: 4px groove; }
div { border: 4px ridge; }
div { border: 4px inset; }
div { border: 4px outset; }

Para ver todos los estilos aplicados en los cuatro bordes de un elemento, puedes consultar la documentación de la propiedad border-style.