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.

div { border: 1px solid #C00; }

 

Si quieres ponerlo más ancho solo tienes que cambiar el 1px por otro valor más alto por ejemplo 5px.

div { border: 5px solid #C00; }

 

Para cambiar el color solo hay que cambiar ese valor, por ejemplo, si lo queremos poner negro:

div { border: 1px solid black; }

 

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.

div { border: none; }

hidden: otro tanto de lo mismo, hace el mismo efecto que none. Se utiliza sobre todo en tablas cuando hay conflictos.

div { border: hidden; }

dotted: es un borde punteado.

div { border: 1px dotted black; }

 

dashed: borde discontinuo.

div { border: 1px dashed black; }

 

solid: borde continuo.

div { border: 1px solid black; }

 

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.

div { border: 4px double black; }

 

groove: borde hundido. Si quieres que se note este efecto tienes que poner un tamaño mayor de 4px.

div { border: 5px groove black; }

 

ridge: borde saliente. Igual que en caso anterior con 1px no verás este efecto.

div { border: 5px ridge black; }

 

inset: borde hundido.

div { border: 5px inset black; }

 

outset: borde saliente.

div { border: 5px outset black; }

 

 

CSS border radius

Para conseguir bordes redondeados con css solo tienes que aplicar la propiedad border-radius.

Si quieres todas las esquinas redondeadas:

div { border-radius: 25px; }

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:

div { border-radius: 0 0 25px 25px; }

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.