CSS | propiedad border-block-end-color

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

Sintaxis:

border-block-end-color: border-color;

Valores de propiedad:

  • border-color: esta propiedad contiene el color del borde.

Los siguientes ejemplos ilustran la propiedad border-block-end-color en el CSS: 

Ejemplo 1: 

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-block-end-color Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border: 5px solid gray;
            border-block-end-color: yellow;
            background-color: purple;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-block-end-color 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-end-color Property</title>
    <style>
        h1 {
            color: green;
        }
          
        div {
            background-color: yellow;
            width: 220px;
            height: 40px;
        }
        .one {
            border: 5px solid black;
            border-block-end-color: green;
            background-color: purple;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | border-block-end-color 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-end-color 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 *