La propiedad CSS border te permite especificar el estilo, ancho y color del borde de un elemento. La propiedad border-style especifica que tipo de borde mostrar. Los siguientes valores son permitidos:
- dotted: define un borde punteado
- dashed: define un borde discontinuo
- solid: define un borde sólido
- double: define un doble borde
- groove: define un borde de ranura
- ridge: define un borde rugoso
- inset: define un borde insertado 3D. El efecto depende del valor del color del borde.
- outset: define un borde inicial 3D. El efecto depende del valor del color del borde.
- none: define un borde oculto
La propiedad de border-style puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Ejm
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
border-width
La propiedad border-width especifica el ancho de los cuatro bordes. El ancho se puede establecer como un tamaño específico (en px, pt, cm, em, etc.) o usando uno de los tres valores predefinidos: thin (fino), medium (medio) o thick (grueso).
Ejm
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
Anchos laterales específicos
La propiedad border-width puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Ejm
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px arriba y abajo, 20px en los lados */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px arriba y abajo, 5px en los lados */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px arriba, 10px derecha, 4px abajand 35px left */
}
border-color
La propiedad border-color es usada para definir el color de los 4 bordes. El color se puede configurar mediante:
- Nombre: especifica un nombre de color como «red».
- Hexadecimal: especifica un valor hexadecimal, como «#ff0000».
- RGB: especifica un valor RGB como rgb(255,0,0).
- HSL: especifica un valor HSL como hsl(0,100%,50%).
Nota: si no se establece border-color, hereda el color del elemento.
Ejm
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
La propiedad border-color puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Ejm
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
Lados de borde CSS
De los ejemplos de las páginas anteriores, ha visto que es posible especificar un borde diferente para cada lado. En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecho, inferior e izquierdo).
Ejm
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
El ejemplo anterior da el mismo resultado que este:
Ejm
p {
border-style: dotted solid;
}
Así es como funciona:
Si la propiedad border-style tiene 4 valores:
- border-style: dotted solid double dashed;
- El borde de arriba dotted
- El borde derecho solid
- El borde de abajo double
- El borde izquierdo dashed
Si la propiedad border-style tiene 3 valores:
- border-style: dotted solid double;
- El borde de arriba es dotted
- Los bordes izquierdo y derecho son solid
- El borde de abajo es double
Si la propiedad tiene 2 valores
- border-style: dotted solid;
- Los bordes de arriba y abajo dotted
- Los bordes laterales solid
Si la propiedad tiene un sólo valor
- border-style: dotted;
- Todos los bordes son dotted
Ejm
/* Cuatro valores */
p {
border-style: dotted solid double dashed;
}
/* Tres valores */
p {
border-style: dotted solid double;
}
/* Dos valores */
p {
border-style: dotted solid;
}
/* Un valor */
p {
border-style: dotted;
}
Propiedad de borde abreviado CSS
Como vio en la página anterior, hay muchas propiedades a considerar cuando se trata de bordes. Para acortar el código, también es posible especificar todas las propiedades de borde individuales en una propiedad. La propiedad border es una propiedad abreviada para las siguientes propiedades de borde individuales.
border-widthborder-style(requerido)border-color
Ejm
p {
border: 5px solid red;
}
También puede especificar todas las propiedades de borde individuales para un solo lado:
Ejm
p {
border-left: 6px solid red;
}
Bordes redondeados
La propiedad border-radius es usada para añadir bordes redondeados a un elemento.
Ejm
p {
border: 2px solid red;
border-radius: 5px;
}
Resumen
| Propiedad | Descripción |
|---|---|
| border | Establece todas las propiedades de borde en una declaración |
| border-bottom | Establece todas las propiedades del borde inferior en una declaración |
| border-bottom-color | Establece el color del borde inferior. |
| border-bottom-style | Establece el estilo del borde inferior. |
| border-bottom-width | Establece el ancho del borde inferior. |
| border-color | Establece el color de los cuatro bordes. |
| border-left | Establece todas las propiedades del borde izquierdo en una declaración |
| border-left-color | Establece el color del borde izquierdo. |
| border-left-style | Establece el estilo del borde izquierdo. |
| border-left-width | Establece el ancho del borde izquierdo. |
| border-radius | Establece las cuatro propiedades border-*-radius para esquinas redondeadas |
| border-right | Establece todas las propiedades del borde derecho en una declaración |
| border-right-color | Establece el color del borde derecho |
| border-right-style | Establece el estilo del borde derecho. |
| border-right-width | Establece el ancho del borde derecho |
| border-style | Establece el estilo de los cuatro bordes. |
| border-top | Establece todas las propiedades del borde superior en una declaración |
| border-top-color | Establece el color del borde superior. |
| border-top-style | Establece el estilo del borde superior. |
| border-top-width | Establece el ancho del borde superior |
| border-width | Establece el ancho de todos los bordes |