CSS | Propiedad border-block-start-width

La propiedad border-block-start-width en CSS se usa para definir los valores de propiedad de borde de inicio de bloque lógico individual en un solo lugar en la hoja de estilo. Esta propiedad establece el ancho del borde en la parte superior del borde del elemento de definición. 

Sintaxis:

border-block-start-width: border-width;

Valores de propiedad:

  • border-width: Esta propiedad mantiene el ancho del borde.

Los siguientes ejemplos ilustran la propiedad border-block-start-width en el CSS: 

Ejemplo 1: 

html

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS | border-block-start-width Property</title>
    <style>
        h1 {
            color: green;
        }
          
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border: 5px solid gray;
            border-block-start-width: 8px;
            background-color: purple;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-block-start-width Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>
  
</html>

Producción:

  

Ejemplo 2: 

html

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS | border-block-start-width Property</title>
    <style>
        h1 {
            color: green;
        }
          
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border: 5px solid black;
            border-block-start-width: 2px;
            background-color: purple;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-block-start-width Property</b>
        <br><br>
        <div class="one">A Computer Science Portal</div>
    </center>
</body>
  
</html>

Producción:

  

Navegadores compatibles: los navegadores compatibles con la propiedad border-block-start-width se enumeran a continuación:

  • cromo 69
  • Firefox 41
  • Ópera 56
  • Borde 79
  • Safari 12.1

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *