CSS | Propiedad de estilo de borde inferior

Posted on by Rudeus Greyrat

La propiedad border-bottom-style en CSS se usa para establecer el estilo del borde inferior de un elemento.

Sintaxis:

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

Valores de propiedad:

ninguno: es el valor predeterminado y hace que el ancho del borde inferior sea cero. Por lo tanto, no es visible.

  • Sintaxis: 
    border-bottom-style: none;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: none; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:none; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     
  • Producción:

oculto: se utiliza para hacer invisible el borde inferior. Es similar a ningún valor, excepto en el caso de resolución de conflictos de borde de los elementos de la tabla.

  • Sintaxis: 
    border-bottom-style: hidden;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: hidden; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:hidden; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                  
        
  • Producción:

dotted: Hace el borde inferior con una serie de puntos.

  • Sintaxis: 
    border-bottom-style: dotted;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: dotted; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:dotted; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     
  • Producción:

punteado: forma el borde inferior con una serie de segmentos de línea cortos.

  • Sintaxis: 
    border-bottom-style: dashed;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: dashed; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:dashed; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     
  • Producción:

sólido: se utiliza para hacer el borde inferior con un solo segmento de línea sólida.

  • Sintaxis: 
    border-bottom-style: solid;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: solid; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:solid; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     
  • Producción:

double: Convierte el borde inferior en doble línea sólida. En este caso, el ancho del borde es igual a la suma de los anchos de los segmentos de dos líneas y el espacio entre ellos.

  • Sintaxis: 
    border-bottom-style: double;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: double; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:double; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     
  • Producción:

ranura: Hace el borde inferior con un segmento de línea ranurada, lo que hace sentir que va hacia adentro.

  • Sintaxis: 
    border-bottom-style: groove;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    border: 10px; 
                    border-style: solid; 
                      
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: groove; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:groove; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                                 
  • Producción:

recuadro: Hace el borde inferior con un segmento de línea incrustado, lo que da la sensación de que está fijado profundamente en la pantalla.

  • Sintaxis: 
    border-bottom-style: inset;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    border: 10px; 
                    border-style: solid; 
                      
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: inset; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:inset; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                                 
  • Producción:

comienzo: Es lo contrario de inserción. Hace el borde inferior con un segmento de línea, que parece estar saliendo.

  • Sintaxis: 
    border-bottom-style: outset;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    border: 10px; 
                    border-style: solid; 
                      
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: outset; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:outset; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                                 
  • Producción:

initial: establece la propiedad border-bottom-style en su valor predeterminado.

  • Sintaxis: 
    border-bottom-style: initial;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: initial; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:initial; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     
  • Producción:

heredar: la propiedad de estilo de borde inferior que se heredará de su elemento principal.

  • Sintaxis: 
    border-bottom-style: inherit;
  • Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style Property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                div { 
                    border-bottom-style: double; 
                } 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property | border-bottom-style */ 
                    border-bottom-style: inherit; 
                } 
            </style> 
        </head> 
          
        <body> 
            <div>
                  
                <!-- border-bottom-style: inherit; -->
                <h1>GeeksForGeeks</h1> 
            </div>
        </body> 
    </html>                     
  • Producción:

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

  • Google Chrome 1.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Ópera 9.2
  • Safari 1.0

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *