HTML | Estilo DOM propiedad borderBottomStyle

La propiedad de estilo borderBottomStyle en HTML DOM se usa para establecer o devolver el estilo del borde inferior de un elemento.

Sintaxis:

  • Devuelve el estilo del borde inferior.
    object.style.borderBottomStyle
  • Establece el estilo del borde inferior.
    border-bottom-style: value;

Valores de propiedad:

  • ninguno: es el valor predeterminado y hace que el ancho del borde inferior sea cero. Por lo tanto, no es visible.
  • 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.
  • dotted: Especifica el borde punteado.
  • dashed: Especifica el borde discontinuo.
  • solid: Especifica el borde sólido.
  • 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 dos segmentos de línea y el espacio entre ellos.
  • Groove: especifica un borde ranurado en 3D, pero este efecto depende del valor del color del borde.
  • ridge: especifica un borde con estrías en 3D, pero este efecto depende del valor del color del borde.
  • recuadro: especifica un borde insertado 3D, pero este efecto depende del valor del color del borde.
  • salida: especifica un borde de salida 3D pero este efecto depende del valor del color del borde.
  • initial: establece la propiedad borderBottomStyle en su valor predeterminado.
  • heredar: Esto hereda la propiedad de su elemento padre.

Valor devuelto: Devuelve el borde inferior con el estilo seleccionado.

Ejemplo 1: este ejemplo describe el valor punteado de la propiedad borderBottomStyle.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style borderBottomStyle Property
    </title>
    <style>
        div {
            color: green;
            text-align: center;
            border: 4px solid green;
        }
    </style>
</head>
  
<body>
    <div id = "main">
        <h1>GeeksforGeeks.!</h1>
    </div>
    <br>
      
    <input type = "button" value = "Click Me.!"
        onclick = "geeks()" />
          
    <script>
        function geeks() {
            document.getElementById("main").style.borderBottomStyle
                    = "dotted";
        }
    </script>
</body>
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: este ejemplo describe el valor doble de la propiedad borderBottomStyle.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style borderBottomStyle Property
    </title>
    <style>
        div {
            color: green;
            text-align: center;
            border: 4px solid green;
        }
    </style>
</head>
  
<body>
    <div id = "main">
        <h1>GeeksforGeeks.!</h1>
    </div>
    <br>
      
    <input type = "button" value = "Click Me.!"
        onclick = "geeks()" />
          
    <script>
        function geeks() {
            document.getElementById("main").style.borderBottomStyle 
                    = "double";
        }
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Navegadores compatibles: los navegadores compatibles con la propiedad borderBottomStyle del estilo DOM 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 kundankumarjha 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 *