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:
