Ya sabemos que todos los elementos HTML son interpretados por el navegador como una caja. Dicha caja está compuesta por 4 bordes no visibles por defecto. Para que un borde se muestre debemos especificar tres propiedades, que son:
Border-width, que nos permite establecer la anchura de un borde.
Border-style, que permite establecer el estilo de cada uno de los bordes.
Border-color, permite indicar el color del borde del elemento.
Veamos cómo se utiliza cada una de estas propiedades.
PROPIEDAD BORDER-STYLE
La primera propiedad que veremos es la propiedad border-style que nos permite definir los estilos de cada uno de los cuatro bordes de un elemento.
La sintaxis es la siguiente:
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
| none | No aplica ningún estilo para el borde. |
| hidden | el borde existe pero está oculto y no es visible; oculta bordes contiguos |
| dotted | aplica un borde punteado. |
| dashed | Establece un borde con estilo de línea discontinua. |
| solid | Establece un borde sólido (línea continua) es el valor más utilizado. |
| double | Establece un dos líneas continuas. |
| groove | define un borde con efecto 3D con foco de luz arriba a la izquierda. |
| ridge | Establece un borde con efecto 3D con foco de luz abajo a la derecha |
| inset | Establece un borde con profundidad «hacia dentro». |
| outset | Establece un borde con profundidad «hacia fuera». Opuesto a inset. |
Por ejemplo:
<div>
<p id="estilos">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>Creamos la regla:
div p#estilos {
font-size: 30px;
border:solid; ;
}Este es el resultado:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fíjate que al aplicar los bordes ahora podemos ver la caja que contiene al elemento <p>.
También podemos crear estilos diferentes para los cuatro bordes que componen la caja de un elemento.
- Si se indica un valor: Se aplica a los cuatro bordes.
- Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al borde izquierdo y derecho.
- Si se indican tres valores: El primero se aplica al borde superior, el segundo a los bordes izquierdo y derecho, y el tercero al borde inferior.
- Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.
En el siguiente ejemplo, vamos a aplicar bordes con estilos diferentes para un elemento <p>:
<p id="bordes-multiples">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Luego creamos la regla:
p#bordes-multiples {
border-style: solid dotted dashed groove;
}Este es el resultado:
See the Pen A mixed border by simplicitytree (@simplicitytree) on CodePen.
PROPIEDAD BORDER-WIDTH
Esta propiedad permite controlar la anchura o el grosor de los bordes.
La sintaxis es:
border-width: thin | medium | thick | tamaño
- thin: define un borde pequeño.
- medium: define un borde normal (valor por defecto).
- thick: aplica un borde más ancho.
- tamaño: Permite definir el tamaño del borde. La unidad de medida más habitual es el píxel pues permite un control más preciso sobre el grosor.
Por ejemplo:
<h2>Propiedad border-width</h2>
<p class="uno">Lorem ipsum.</p>
<p class="dos">Lorem ipsum.</p>
<p class="tres">Lorem ipsum.</p>
<p class="cuatro">Lorem ipsum.</p>
<p class="cinco">Lorem ipsum.</p>
<p class="seis">Lorem ipsum.</p>Luego creamos la regla:
p.uno {
border-style: solid;
border-width: 5px;
}
p.dos {
border-style: solid;
border-width: medium;
}
p.tres {
border-style: dotted;
border-width: 2px;
}
p.cuatro {
border-style: dotted;
border-width: thick;
}
p.cinco {
border-style: double;
border-width: 15px;
}
p.seis {
border-style: double;
border-width: thick;
}See the Pen PROPIEDAD BORDER-WIDTH by simplicitytree (@simplicitytree) on CodePen.
Y al igual que la propiedad BORDER-STYLE podemos definir diferentes valores simultáneamente para la anchura de los bordes:
- Si se indica un valor: Se aplica a los cuatro bordes.
- Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al borde izquierdo y derecho.
- Si se indican tres valores: El primero se aplica al borde superior, el segundo a los bordes izquierdo y derecho, y el tercero al borde inferior.
- Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.
PROPIEDAD BORDER-COLOR
También podemos indicar el color de los bordes. Esto lo hacemos mediante la propiedad BORDER-COLOR. Por ejemplo, vamos a establecer que todos los bordes aparezcan con un color verde.
See the Pen Untitled by simplicitytree (@simplicitytree) on CodePen.
Y al igual que las demás propiedades podemos definir colores diferentes para cada borde:
- Si se indica un valor: Se aplica a los cuatro bordes.
- Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al borde izquierdo y derecho.
- Si se indican tres valores: El primero se aplica al borde superior, el segundo a los bordes izquierdo y derecho, y el tercero al borde inferior.
- Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.
PROPIEDAD BORDER
CSS también dispone de una propiedad de atajo para definir los bordes, y es la propiedad BORDER con la que podemos aplicar estilos de forma más sencilla. Veamos el siguiente ejemplo:
<p id="atajo">Lorem ipsum sit amet, consectetur adipisicing elit.</p>Creamos la regla:
div p#atajo {
border: 2px solid blue;
}Este es el resultado:
Lorem ipsum sit amet, consectetur adipisicing elit.
BORDES ESPECÍFICOS
También podemos utilizar bordes específicos para aplicar estilos a un área determinada del elemento. Para ello utilizamos las propiedades:
- border-top: aplica un borde en la parte superior.
- border-bottom: aplica un borde en la parte inferior.
- border-left: aplica un borde en la parte izquierda.
- border-right: aplica un borde en la parte derecha.
Por ejemplo, vamos a aplicar un borde superior para el siguiente párrafo:
<p id="especifico">Lorem ipsum sit amet, consectetur adipisicing elit.</p>Y luego creamos la regla:
div p#especifico {
border-top: 10px solid orange;
font-size:30px;
}Este es el resultado:
Lorem ipsum sit amet, consectetur adipisicing elit.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
