Borde CSS
Borde CSS
En este capítulo, hablaremos sobre bordes y cómo podemos darles estilo. Podemos establecer el ancho, el estilo y el color del borde.
Ejemplo de la propiedad border:
Ejemplo de la propiedad border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>Resultado
Ancho del borde
La propiedad border-width establece el ancho de un borde.
El ancho se puede especificar en píxeles. También se puede especificar con uno de los tres valores predefinidos: medium, thin o thick.
No puedes usar la propiedad "border-width" por sí sola. No funcionará. Usa "border-style" para establecer los bordes primero.
Ejemplo de la propiedad border-width:
Ejemplo de la propiedad border-width:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>Color del borde
La propiedad border-color se utiliza para establecer el color de un borde. El color se puede establecer mediante:
- nombre - especifica un nombre de color, como "red"
- RGB - especifica un valor RGB, como "rgb(255,0,0)"
- Hex - especifica un valor hexadecimal, como "#ff0000"
No puedes usar la propiedad "border-color" por sí sola. No funcionará. Usa "border-style" para establecer los bordes primero.
Normalmente, escribimos estas tres propiedades juntas en una sola línea.
Ejemplo de la propiedad border-color:
Ejemplo de la propiedad border-color:
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>Puedes probar otros ejemplos con nuestra herramienta CSS Maker.
Estilo del borde
La propiedad CSS border-style establece el estilo de los cuatro lados de los bordes de un elemento. Los bordes se colocan encima del fondo de un elemento. Puede tener de uno a cuatro valores. Por lo tanto, cada lado puede tener su propio valor. El valor predeterminado de border-style es none.
Border-style tiene los siguientes valores:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Algunos navegadores no admiten algunos estilos. Por lo general, cuando un estilo no es compatible, el navegador dibuja el borde como uno sólido.
Borde CSS para lados individuales
CSS proporciona propiedades que especifican cada borde (derecho, izquierdo, inferior y superior).
La propiedad border-style puede tener 4 valores, por ejemplo, border-style: dotted solid double dashed; donde el borde superior es punteado, el inferior es doble, el derecho es sólido y el izquierdo es discontinuo.
La propiedad border-style puede tener 3 valores, por ejemplo, border-style: dotted solid double; donde el borde superior es punteado, el inferior es doble y los bordes derecho e izquierdo son sólidos.
La propiedad border-style puede tener 2 valores, por ejemplo, border-style: dotted solid; donde los bordes derecho e izquierdo son sólidos y los bordes superior e inferior son punteados. Y, por supuesto, esta propiedad puede tener solo 1 valor, por ejemplo, border-style: solid; donde todos los lados son sólidos.
Ejemplo de las propiedades de borde para lados individuales:
Ejemplo del borde para lados individuales:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>Propiedad abreviada de borde CSS
La propiedad CSS border es una propiedad abreviada para las siguientes propiedades individuales de borde:
- La propiedad CSS border-width, que establece el ancho de los cuatro lados del borde de un elemento.
- La propiedad CSS border-style, que establece el estilo de los cuatro lados de los bordes de un elemento.
- La propiedad CSS border-color, que establece el color de los cuatro lados del borde de un elemento.
Ejemplo de la propiedad abreviada de borde:
Ejemplo de la propiedad abreviada de borde:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>Bordes redondeados
Usando la propiedad CSS border-radius, puedes agregar bordes redondeados a un elemento.
Ejemplo de la propiedad border-radius:
Ejemplo de la propiedad border-radius:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>La diferencia entre bordes y contornos
Los contornos y los bordes suelen ser confusos porque son muy similares. Pero hay diferencias entre estos dos:
- Los contornos se dibujan fuera del contenido de un elemento, por lo que no ocupan espacio.
- Los contornos suelen ser rectangulares, aunque no tienen por qué serlo.
Práctica
¿Cuáles de las siguientes son propiedades que se pueden usar para dar estilo a los bordes en CSS?