15-anchura de los bordes en css

La anchura de los bordes en css se define con la propriedad border-width

La anchura de los bordes en css se define con la propriedad border-width

Lo primero es defenir el estilo del borde, despues le decimos con la propriedad border-width cuanto queremos de ancho en pixels

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-width:5px ">Border dotted</p>
<p style="border-style:dashed; border-width:5px  ">Border dashed</p>
<p style="border-style:solid;  border-width:5px  ">Border solid</p>
<p style="border-style:double; border-width:5px  ">Border double</p>
<p style="border-style:groove; border-width:5px  ">Border groove</p>
<p style="border-style:ridge;  border-width:5px  ">Border ridge</p>
<p style="border-style:inset;  border-width:5px  ">Border inset</p>
<p style="border-style:outset; border-width:5px  ">Border outset</p>
<p style="border-style:none;   border-width:5px  ">Border none</p>
<p style="border-style:hidden; border-width:5px  ">Border hidden</p>

---

Anchura de los laterales

La propriedad border-width sirve tambien para poner anchura solo en los laterales

ejemplo

Solo anchura en el borde superior

Border solid

Explicacion: Si ponemos solo un valor, este por defecto toma los cuatros bordes (top, derecha, abajo, esquierda)

Border solid

ejemplo del codigo

<p style="border-style:solid; border-width:20px">Border solid</p>

Si ponemos dos valores, por defecto toma el primero (arriba y abajo) y el seguiente (los laterales)

Border solid

ejemplo del codigo

<p style="border-style:solid; border-width:20px 20px">Border solid</p>

Si ponemos tres valores el primero toma el valor superior, el segundo los laterales y el tercero abajo

Border solid

ejemplo del codigo

<p style="border-style:solid; border-width:20px 15px 10px">Border solid</p>

Ponendo los cuatro valores el primero corresponde al borde superior, el segundo al borde de la derecha, el tercero al borde de abajo y el cuarto al borde esquierdo

Border solid

ejemplo del codigo

<p style="border-style:solid; border-width:20px 15px 10px 1px">Border solid</p>

---

Ir al indice