¿Cómo definir el color del borde usando CSS?

Podemos dar el color del borde usando las propiedades border o border-color . Necesitamos dar una propiedad de estilo de borde .

Acercarse: 

  • Le daremos el color del borde usando la propiedad border de CSS.
  • Daremos nuestro CSS dentro de las etiquetas, que también se conocen como estilo en línea .
  • Necesitamos dar la propiedad de estilo de borde a sólido, discontinuo, doble, oculto, etc.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<body>
 <h1 style="border: rgb(195, 255, 0);
            border-style: solid;">
    Java GFG
 </h1>
 <h2 style="border: rgb(0, 140, 255);
            border-style: solid;">
     C++ GFG
 </h2>
</body>
</html>

Producción :

Enfoque 2: 

  • En este ejemplo, usaremos la propiedad border-color de CSS dentro de la etiqueta de estilo de la sección principal. También se conoce como CSS interno o incrustado.
  • Si proporciona dos colores en la propiedad border-color , el primer color será para arriba/abajo y el segundo color será para izquierda-derecha.
  • Si da 4 colores, el primero será superior, el segundo será derecho y el tercero, el cuarto será inferior, izquierdo (superior, derecho, inferior, izquierdo).

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h3{
            border-color:rgb(0, 255, 76);
            border-style: dashed;
        }
        h2{
             /* top->red right->blue bottom->green left->orange */
            border-color: red blue green orange;
            border-style: solid;
        }
        h1{
            /* top/bottom ->red  left/right->blue */
            border-color: red blue;
            border-style: solid;
        }
 
    </style>
</head>
<body>
 <h1>Java GFG</h1>
 <h2>C++ GFG</h2>
 <h3>Python GFG</h3>
</body>
</html>

Producción :

CSS de color de borde

Publicación traducida automáticamente

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