CSS | Propiedad border-top-style

La propiedad de estilo border-top se utiliza para especificar el estilo del borde superior.

Sintaxis:

border-top-style: none | dotted | dashed | solid | groove | inset | 
outset | ridge | double | hidden | initial | inherit;

Valor predeterminado: el valor predeterminado es ninguno .

Valores de propiedad

Ninguno: Es el valor predeterminado y hace que el ancho del borde superior sea cero. Por lo tanto, no es visible.
Sintaxis:

border-top-style:none;

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: none;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Punteado: Se utiliza para hacer el borde superior con una serie de puntos.
Sintaxis:

border-top-style:dotted;

Ejemplo-2:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: dotted;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Discontinua: Hace el borde superior con una serie de segmentos de línea cortos.
Sintaxis:

border-top-style:dashed;

Ejemplo-3:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: dashed;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Sólido: se usa para hacer el borde superior con un solo segmento de línea sólida.

Sintaxis:

border-top-style:solid;

Ejemplo-4:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: solid;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Ranura: Hace que la parte superior bordee con un segmento de línea ranurada, lo que nos hace sentir que va hacia adentro.

Sintaxis:

border-top-style:groove;

Ejemplo-5:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: groove;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Recuadro: Hace el borde superior con un segmento de línea incrustado que nos hace sentir que está fijo profundamente en la pantalla.

Sintaxis:

border-top-style:inset;

Ejemplo-6:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: inset;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Outset: Es lo contrario de inset. Hace el borde superior con un segmento de línea, que parece estar saliendo.

Sintaxis:

border-top-style:outset;

Ejemplo-7:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: outset;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Cresta: Es lo contrario de surco. Hace el borde superior con un segmento de línea acanalada, lo que nos hace sentir que está saliendo.

Sintaxis:

border-top-style:ridge;

Ejemplo-8:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: ridge;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Doble: Hace el borde superior con una doble línea continua. El ancho del borde, en este caso, es igual a la suma de los anchos de los segmentos de dos líneas y el espacio entre ellos.

Sintaxis:

border-top-style:double;

Ejemplo-9:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: double;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Oculto: se utiliza para hacer que el borde superior sea invisible, como ninguno , excepto en caso de resolución de conflictos de borde de los elementos de la tabla.

Sintaxis:

border-top-style:hidden;

Ejemplo-10

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style: hidden;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Inicial: Se utiliza para establecer el valor por defecto del elemento.

Sintaxis:

border-top-style:initial;

Ejemplo: 11

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3 {
            border-top-style: initial;
        }
          
    </style>
</head>
  
<body>
    <h3>GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Heredar: hace que la propiedad de estilo de borde superior se herede de su elemento principal.

Sintaxis:

border-top-style:inherit;

Ejemplo: 12

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3 {
            border-top-style: inherit;
        }
          
        body {
            border-top-style: dotted;
        }
    </style>
</head>
  
<body>
    <h3>GeeksforGeeks </h3>
</body>
  
</html>

Producción:

Nota: Esta propiedad es necesaria cuando se usa la propiedad border-top.

Navegadores compatibles: los navegadores compatibles con la propiedad border-top-style se enumeran a continuación:

Google cromo 1
Borde 12
mozilla firefox 1
Internet Explorer 5.5
Ópera 9.2
Safari 1

Publicación traducida automáticamente

Artículo escrito por sheyakhare1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta