En este artículo podrás aprender a utilizar la propiedad css border con todas sus variantes. Si necesitas que el borde sea redondo, si quieres que sea más ancho, si quieres un borde un color determinado o incluso si quieres que solo aparezca uno de los border (arriba, abajo, izquierda o derecha).
Si sigues paso a paso las instrucciones podrás crear los bordes de un elemento determinado de muchas formas diferentes.
Empezamos con CSS border
La nomenclatura típica es la siguiente:
div { border: 1px solid #C00; }
Es la forma más común y más típica. El elemento tendrá un borde de tamaño 1px de forma línea contínua arriba, abajo, a la izquierda y a la derecha.
¿Y cómo se ve? A continuación puedes ver el resultado de aplicar este código.
Si quieres ponerlo más ancho solo tienes que cambiar el 1px por otro valor más alto por ejemplo 5px.
Para cambiar el color solo hay que cambiar ese valor, por ejemplo, si lo queremos poner negro:
Otra forma de poner lo mismo es con el código:
div { border-top: 1px solid #C00; border-right: 1px solid #C00; border-bottom: 1px solid #C00; border-left: 1px solid #C00; }
Solo es aconsejable ponerlo como el segundo caso si en algunas posiciones no hay borde, o es de diferente color, o de distinto grosor.
Otro detallito, no tienes que poner todas las características. Por ejemplo si quieres solo mostrar el ancho:
div { border-width: 1px; }
Cogería por defecto color negro y estilo solid (la línea continua).
CSS border style
No todos los bordes tienen que ser en forma de líneas rectas, hay muchas más variantes y aquí podrás verlas todas.
none: no se muestra ningún borde. Así es como se muestra por defecto cualquier elemento, sin bordes. Si queremos alguno tenemos que indicarlo en el código css.
hidden: otro tanto de lo mismo, hace el mismo efecto que none. Se utiliza sobre todo en tablas cuando hay conflictos.
dotted: es un borde punteado.
dashed: borde discontinuo.
solid: borde continuo.
double: borde doble, formado por dos líneas continuas. Si pones este tipo de borde con 1px solo se va a ver una línea. Si quieres que muestre este efecto tiene que ser siempre más de 3px.
groove: borde hundido. Si quieres que se note este efecto tienes que poner un tamaño mayor de 4px.
ridge: borde saliente. Igual que en caso anterior con 1px no verás este efecto.
inset: borde hundido.
outset: borde saliente.
CSS border radius
Para conseguir bordes redondeados con css solo tienes que aplicar la propiedad border-radius.
Si quieres todas las esquinas redondeadas:
También hay que incluir el código para Safary y Firefox, por lo que quedaría así:
div {
border-radius: 25px;
-webkit-border-radius: 25px; /* Safari */
-moz-border-radius: 25px; /* Firefox */
}
Si los quieres más redondeados solo tienes que incrementar el valor, si está en 25px, irlo subiendo.
En caso de que quieras que solo algunos bordes estén redondeados, el código es similar pero indicando solo donde quieres que se muestre esa zona redondeada.
div {
border-radius: 0 0 25px 25px;
-webkit-border-radius: 0 0 25px 25px; /* Safari */
-moz-border-radius: 0 0 25px 25px; /* Firefox */ }
Y el resultado visual es el siguiente:
Solo hemos redondeado los dos inferiores. Sobre esta base puedes hacer múltiples combinaciones.
Un paso más con css border
Con css border puedes conseguir cosas como estás, simplemente modificando valores en el css:
div {
border-width:30px;border-style:solid;
border-color: green red orange black;
height:50px;
width:50px;
}
div {
border-width:30px;
border-style:solid;
border-color: green red orange black;
height:1px; width:1px; }
div {
border-width:30px;
border-style:solid;
border-color: transparent transparent orange transparent;
height:1px; width:1px; }
Y aquí acaba este mini tutorial de css border. Espero que te sirva para hacer distintos tipos de bordes en tu página web.
Otros recursos CSS3
A continuación podrás ver otros recursos interesantes de css3:
