8.1 Propiedad border
Los bordes son un aspecto importante del diseño web. Permiten resaltar elementos y mejorar la percepción visual de la página. CSS proporciona muchas propiedades para crear y estilizar bordes. Vamos a ver las propiedades principales de los bordes, incluyendo la notación compacta y completa, así como las propiedades para definir el ancho, el estilo, el color y las esquinas redondeadas de los bordes.
Parámetros principales
Los parámetros principales del borde se pueden definir usando propiedades individuales: border-width, border-style y border-color.
Sintaxis:
element {
border-width: width;
border-style: style;
border-color: color;
}
Ejemplo de uso:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Notación compacta
La propiedad border permite definir todos los parámetros principales del borde (ancho, estilo y color) en una sola línea.
Sintaxis:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Notación compacta</div>
<div class="border-full">Notación completa</div>
</body>
8.2 Ancho del borde: border-width
La propiedad border-width define el ancho del borde. Los valores pueden ser definidos en píxeles (px),
puntos (pt), porcentajes (%) o palabras clave (thin, medium, thick).
Sintaxis:
element {
border-width: width;
}
Ejemplo:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Borde delgado</div>
<div class="border-medium">Borde mediano</div>
<div class="border-thick">Borde grueso</div>
<div class="border-custom">Borde con ancho de 5px</div>
</body>
8.3 Estilo del borde: border-style
Descripción:
La propiedad border-style define el estilo del borde. Los estilos posibles incluyen:
none: sin bordesolid: línea continuadotted: línea de puntosdashed: línea discontinuadouble: línea doblegroove: borde con forma de ranuraridge: borde con forma de crestainset: borde hundidooutset: borde en relieve
Sintaxis:
element {
border-style: style;
}
Ejemplo:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Sin borde</div>
<div class="border-solid">Línea continua</div>
<div class="border-dotted">Línea de puntos</div>
<div class="border-dashed">Línea discontinua</div>
<div class="border-double">Línea doble</div>
<div class="border-groove">Ranura</div>
<div class="border-ridge">Cresta</div>
<div class="border-inset">Borde hundido</div>
<div class="border-outset">Borde en relieve</div>
</body>
8.4 Color del borde: border-color
La propiedad border-color define el color del borde. El color puede especificarse en varios formatos: nombres de colores,
códigos hexadecimales, RGB, RGBA, HSL, HSLA.
Sintaxis:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Borde rojo</div>
<div class="border-blue">Borde azul</div>
<div class="border-green">Borde verde</div>
<div class="border-rgba">Borde rojo semitransparente</div>
</body>
8.5 Esquinas redondeadas con border-radius
La propiedad border-radius permite redondear las esquinas de los elementos, creando bordes redondeados. Se puede
aplicar a las cuatro esquinas a la vez o a cada esquina por separado.
Sintaxis:
element {
border-radius: radius;
}
Valores:
- Valor único: por ejemplo,
border-radius: 10px;— define un radio de redondeo igual para todas las esquinas - Dos valores: por ejemplo,
border-radius: 10px 20px;— el primer valor para las esquinas superiores izquierda e inferior derecha, el segundo para las esquinas superiores derecha e inferior izquierda - Cuatro valores: por ejemplo,
border-radius: 10px 20px 30px 40px;— define los radios para las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda respectivamente - Valores mixtos: los radios pueden definirse en porcentajes, permitiendo adaptar el redondeo al tamaño del elemento
Ejemplo:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Redondeo de todas las esquinas</div>
<div class="radius-top">Redondeo de esquinas superiores</div>
<div class="radius-bottom">Redondeo de esquinas inferiores</div>
<div class="radius-mixed">Redondeo mixto de esquinas</div>
</body>
.radius-all: aplica un radio de redondeo igual (15px) a todas las esquinas.radius-top: aplica redondeo (20px) solo a las esquinas superiores.radius-bottom: aplica redondeo (25px) solo a las esquinas inferiores.radius-mixed: aplica diferentes valores de radio a cada esquina
GO TO FULL VERSION