Propiedad CSS border-top-style

La propiedad CSS border-top-style se usa para establecer el estilo del borde superior de un elemento.

Esta propiedad se especifica como una sola palabra clave elegida entre las disponibles para la propiedad border-style. La propiedad border-style se usa para establecer el estilo de los cuatro lados de un elemento, pero border-top-style establece un estilo solo para el borde superior.

El ancho predeterminado del borde superior es medium. Puede cambiarse usando las propiedades border-top-width o border-width.

No todos los navegadores representan los estilos de la misma manera. Chrome representa los puntos como rectángulos, no como círculos.

INFO

La especificación no indica la cantidad de espacio entre los puntos y las rayas.

INFO

La especificación no define cómo se conectan en las esquinas los bordes de distintos estilos.

Default Value	none
Applies to	All elements. It also applies to ::first-letter.
Inherited	No
Animatable	No
Version	CSS1
DOM Syntax	object.style.borderTopStyle = "dashed";

Sintaxis

Sintaxis de la propiedad CSS border-top-style

css

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 valores dashed y dotted

html

<!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>

Try it Yourself »

INFO

Dependiendo del valor de border-color, los efectos de los valores groove, ridge, inset y outset pueden cambiar.

Resultado

CSS border-top-style Property

Ejemplo de la propiedad border-top-style con todos los valores de estilo:

Ejemplo de la propiedad CSS border-top-style con valores hidden, dotted, dashed, solid, double, groove, ridge, inset y outset

html

<!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>

Try it Yourself »

Valores

Value	Description	Play it
none	Define que no habrá ningún borde. Valor predeterminado.	Play it »
hidden	Es lo mismo que "none", excepto en la resolución de conflictos de bordes para elementos de tabla.	Play it »
dotted	Define un borde punteado.	Play it »
dashed	Define un borde discontinuo.	Play it »
double	Define un borde doble.	Play it »
solid	Define un borde sólido.	Play it »
groove	Define un borde 3D con relieve. Su efecto puede cambiarse con el valor de border-color.	Play it »
ridge	Define un borde 3D con cresta. Su efecto puede cambiarse con el valor de border-color.	Play it »
inset	Define un borde 3D hundido. Su efecto puede cambiarse con el valor de border-color.	Play it »
outset	Define un borde 3D saliente. Su efecto puede cambiarse con el valor de border-color.	Play it »
initial	Establece la propiedad a su valor predeterminado.	Play it »
inherit	Hereda la propiedad del elemento padre.

Propiedad CSS border-top-style ​

Sintaxis ​

Ejemplo de la propiedad border-top-style: ​

Resultado ​

Ejemplo de la propiedad border-top-style con todos los valores de estilo: ​

Valores ​

Practice ​

Propiedad CSS border-top-style

Sintaxis

Ejemplo de la propiedad border-top-style:

Resultado

Ejemplo de la propiedad border-top-style con todos los valores de estilo:

Valores

Practice