16-Colores de los bordes en css

El color de los bordes se pone con la propriedad border-color

Lo primero es defenir el estilo del borde, despues le decimos con la propriedad border-color

Ejemplo

Border dotted
Border dashed
Border solid
Border double
Border groove
Border ridge
Border inset
Border outset
Border none
Border hidden

...

Ejemplo del codigo

<p style="border-style:dotted; border-color:red ">Border dotted</p>
<p style="border-style:dashed; border-color:red  ">Border dashed</p>
<p style="border-style:solid;  border-color:red  ">Border solid</p>
<p style="border-style:double; border-color:red  ">Border double</p>
<p style="border-style:groove; border-color:red  ">Border groove</p>
<p style="border-style:ridge;  border-color:red  ">Border ridge</p>
<p style="border-style:inset;  border-color:red  ">Border inset</p>
<p style="border-style:outset; border-color:red  ">Border outset</p>
<p style="border-style:none;   border-color:red  ">Border none</p>
<p style="border-style:hidden; border-color:red  ">Border hidden</p>

---

Colores en los bordes

La propriedad border-color sirve para poner un color al borde

ejemplo

borde de color verde

Border Color verde

Codigo

<p style="border-style:solid; border-color:green">Border Color verde</p>

borde de color rojp

Border Color rojo

Codigo

<p style="border-style:solid; border-color:red">Border Color rojo</p>

borde de color amarillo

Border Color amarillo

Codigo

<p style="border-style:solid; border-color:yellow">Border Color amarillo</p>

Configuracion de colores

El color se puede configurar mediante:

• nombre - especifique un nombre de color, como "rojo"
• HEX: especifique un valor HEX, como "#ff0000"
• RGB: especifica un valor RGB, como "rgb(255,0,0)"
• HSL: especifique un valor HSL, como "hsl(0, 100%, 50%)"
• Transparente

borde de color rojo hexadecimal

Border Color rojo hexadecimal

Codigo

<p style="border-style:solid; border-color:#ff0000;">Border Color rojo hexadecimal</p>

borde de color rojo RGB

Border Color rojo RGB

Codigo

<p style="border-style:solid; border-color:rgb(255, 0, 0);">Border Color rojo RGB</p>

borde de color rojo HSL

Border Color rojo HSL

Codigo

<p style="border-style:solid; border-color:hsl(0, 100%, 50%);">Border Color rojo HSL</p>

Ir al indice

---