JMiur [E]

La propiedad border es aquella que nos permite eso, agregar un borde a casi cualquier etiqueta. Sólo es necesario indicar el grosor, el tipo de borde y el color para que, aplicada a un elemento, este quede enmarcado en sus cuatro bordes.

Siempre insisto con lo mismo, toda etiqueta es un rectángulo así que tiene cuatro lados y la propiedad border nos da la posibilidad de identificarlos por separado:
border: 1px solid #FFF; agregará un borde en los cuatro
border-top: 1px solid #FFF; agregará un borde arriba
border-bottom: 1px solid #FFF; agregará un borde abajo
border-left: 1px solid #FFF; agregará un borde a la izquierda
border-right: 1px solid #FFF; agregará un borde a la derecha
El borde ocupa espacio por lo tanto, si el elemento tiene determinado ancho, cuando usamos esta propiedad, ese ancho se incrementará sin importar si hemos definido el ancho con width o no; a veces, eso crea problemas cuando se diagrama una página; por ejemplo, si tuviéramos un DIV de 400 pixeles de ancho y adentro colocamos otros dos de 200 pixeles cada uno y a esos les ponemos la propiedad float, se verán uno al lado del otro:


Pero si a uno de ellos le agregamos un borde, se irá para abajo porque no hay suficiente espacio:


Para solucionar esto, debemos aumentar el ancho del contenedor o reducir el ancho del DIV con el borde tantos pixeles como sea necesario.

Algo similar ocurre cuando se colocan bordes en elementos inline al utilizar estilos de hover; por ejemplo, si tuviéramos esta definición:
a:hover {border:3px solid #FFF;}
al colocar el cursor encima de este enlace, todo el texto se desplazará:

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Esto, se soluciona colocándole un borde de color transparente al enlace yde ese modo, ya estamos "reservando" el espacio necesario:
a {border:3px solid transparent;} 
a:hover {border:3px solid #FFF;}
Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Pero border no es la única propiedad que nos permite recuadrar etiquetas, hay otra que no utilzamos mucho y que hace lo mismo, se trata de la propiedad outline. Pero, en realidad, no hace lo mismo porque tiene dos caracterísiticas particulares. La primera es que no nos permite definir cuál borde agregar, siempre se agregarán los cuatro; la segunda es que no ocupa espacio así que en el ejemplo anterior, si usáramos outiline en lugar de border, el DIV no bajaría:


Teniendo entonces estas dos propiedades a nuestra disposición, podemos utilizarlas juntas para crear bordes dobles sabiendo que outline será siempre el borde exterior y border será el borde interior:
.borderdobles {
  border: 5px solid #FFFF00;
  outline: 5px solid #FF0088;
  padding:10px;
  margin:0 auto;
  width:300px;
}
Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Un detalle a tener en cuenta es que outline no admite curvas y redondeces así que no se ve afectado por las propiedades border-radius:
.borderdobles {
  border: 5px solid #FFFF00;
  outline: 5px solid #FF0088;
  padding: 10px;
  margin: 0 auto;
  width: 300px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

En algunos casos, se utiliza el borde para resaltar los enlaces; se hace para reemplazar la propiedad text-decoration:underline así que en lugar de esto:
a:hover {text-decoration: underline;}
se coloca algo así:
a:hover {border-bottom: 2px dotted red;}
ya que, border tiene muchas más opciones; de ese modo, el "subrayado" puede ser definido con otro color o con otro tipo distinto de "sólido":

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Con CSS3 hay un tercer tipo de borde posible que son las sombras aunque este método no será aplicable en Internet Explorer ya que por ahora, en ese navegador, las sombras son tratadas de manera diferente:
.borderdobles {
  border: solid 5px #FFFF00;
  padding:10px;
  margin: 5px auto;
  width: 300px;
  -moz-box-shadow: 0 0 0 5px #FF0088;
  -webkit-box-shadow: 0 0 0 5px #FF0088;
  box-shadow: 0 0 0 5px #FF0088;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.


Si se trata de imágenes hay una alternativa extra que nos permitiría tener tres bordes; para eso, lo que haremos es establecer un padding es decir, una "separación" y luego, le colocamos un fondo de color:
.borderdobles {
  background-color: #883000;
  border: solid 5px #FFFF00;
  display: block;
  padding:5px;
  margin: 5px auto;
  -moz-box-shadow: 0 0 0 5px #FF0088;
  -webkit-box-shadow: 0 0 0 5px #FF0088;
  box-shadow: 0 0 0 5px #FF0088;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}

21 comentarios:

CeNtInElA  

Tanto que aprender que no se por donde empezar, y que usar, aqui me presentas tu blog como algo que lo puedes modificar a tu antojo, sin embargo para mi resulta chino, y wordpress es un poco mas facil de modificar para mi (hasta donde alcanza mi conocimiento).

¿Que usar? ya tengo mucho que pensar por esta noche.

Responder
Graciela  

Excelente Jmiur! una joyita para guardar :P

Responder
Adrián J. Messina  

Quedó clarísimo y son errores típicos de principiantes, como yo, que sin embargo cuando ocurren nos vuelven loco ya que no entendemos porque ocurre y simplemente no lo aplicamos. Jaja, cuantas veces me han pasado cosas así. Te deja tranquilo saber que todo ocurre porque algo y que se puede controlar en la mayoría de los casos.

Buen finde.

Responder
Andrian Mauricio  

Me gustaría saber si existe alguna posibilidad de agregar un borde interno blanco semitransparente sobre una imagen sin que la imagen se vea afectada, algo así como agregar un padding blanco semitransparente.
El efecto sería algo así: http://s3.subirimagenes.com:81/fotos/6010893untitled2.jpg
Saludos.

Responder
Administrador  

Los bordes para enlaces y capas son mas que utiles, pero para imagenes me parece que es algo poco practico, se agrega mas codigo y habra mas para tener en cuenta entre las compatibilidades con navegadores, es una imagen es mas eficiente agregar los bordes en un programa editor de imagen.
es mi humilde opinion, saludos.

Responder
JMiur  

CeNtInElA:
Mi único consejo es paciencia y no tratar de mmorder más de lo que se puede tragar; hay que probar, equivocarse y seguir probando.
No creo que WP sea más sencillo, por el contrario, como tiene muchas más alternativas, necesariamente es más complejo.

Gracias, Graciela :-)

Adrián J. Messina:
Son errores típicos de ... todos nosotros :D

Andrian Mauricio:
Lo siento, pero la imagen que muestras no es accesible sin embargo, puedes usar el formato rgba() ya sea en al propiedad border o bien agregándoles un padding y un color de fondo con background-color. Eso funciona en cualquier navegador moderno y con algunas restricciones, también en Internet Explorer.

Administrador:
No creo que sea así; en realidad, no existen solciones universales y únicas aplicables a cualquier situación ... por suerte.
Por ejemplo, si de velocidades se trata, las imágenes ya modificadas podrían ser más pesadas; al haber varias, eso podría significar un aumento sustancial en el tiempo.
Además, poseen un inconveniente, cualquier tipo de cambio implicaría rehacerlas. El CSS, por el contrario, es flexible, adaptable a cualquier tipo de sitio y fácilmente editable.
No es la cantidad de código lo que define la performance de un sitio sino qué hace ese código.

Responder
Daisy  

Hola muchas gracias me resulto muy util...
Por otro lado me gustaria saber si soy la unica que le pasa de no que blogger no me deja editar en el editor HTML :S ? estoy desesperada :(

Responder
JMiur  

Fue un error generalizado. Aparentemente, ahora está arreglado.

Responder
Andrian Mauricio  

@JMiur Claro, pero lo que quiero lograr es que este "borde interno" se superponga a la imagen y que con una transparencia del 50% poder darle un efecto elegante.
No existen los bordes interiores y los padding reemplazan a la imagen, de tal forma que si es totalmente transparente no se ve la imagen que tapa. No sé si me explico :S
Me parece raro que no puedas acceder a la imagen, no importa. Busqué "padding transparente" y no encontré nada útil.
Muchas gracias por la respuesta.
Saludos.

Responder
JMiur  

No existen superposiciones transparentes ya que cada etiqueta es un rectangulo, por lo tanto, para que algo se superponga con otra cosa, deben haber por lo menos dos etiquetas, un contenedor y un contenido.

Como el ejemplo que das es inaccesible, desconozco cuál es el resultado que se quiere obtener.

Responder
Andrian Mauricio  

@JMiur Conozco una superposición transparente, se trata de la sombra interna gracias a la palabra clave "inset", pero no logro que aparezca de los cuatro lados.
Aquí subí la imagen a Picasa Web, espero que lo puedas ver ;) https://lh4.googleusercontent.com/_F-Sze0AHqxM/TWhxNvNNuPI/AAAAAAAAAHQ/uF1qj7UJMGM/6010893untitled2.jpg

Responder
JMiur  

Eso sería una sombra:

-moz-box-shadow:0 0 10px #FFF inset;
webkit-box-shadow:0 0 10px #FFF inset;
box-shadow:0 0 10px #FFF inset;

Para que se centre, los dos parámetros que indican las coordenadas X e Y deben ser cero.

No tiene equivalencia en Internet Explorer y no genera un padding sin oque ocupa el mismo espacio que la imagen.

Responder
Rodrigo  

hola amigo uan pregunta

border: 1px solid #FFF; agregará un borde en los cuatro
border-top: 1px solid #FFF; agregará un borde arriba
border-bottom: 1px solid #FFF; agregará un borde abajo
border-left: 1px solid #FFF; agregará un borde a la izquierda
border-right: 1px solid #FFF; agregará un borde a la derecha

esto donde lo pongo dentro de la plantilla?? o agrego un gadget??
se entiende la explicacion solo ke no se donde se pone

graciass

Responder
Rodrigo  

hola amigo como hago para hacer recuadros mas o menos como esta pagina
http://sexdvip.blogspot.com/
le kiero hacer cuadros a autores categorias , perfil etc,

mi blog es este, http://tu-seduccion.blogspot.com/ y me gustaria dejarlo mas prolijoo

Responder
JMiur  

Los bordes son propiedades CSS; se definen reglas de estilo para ciertas etiquetas. Donde se colocan, depende.

No sé a que cuadros te refieres.

Responder
Rodrigo  

lo que quiero hacer es hacer recuadros como esta paginaa http://sexdvip.blogspot.com/
si te fijass de este lado <<< tiene categorias, formato y autores todo en recuadro entiendes??

bueno eso kiero hacer en mi blogg pero no se como se hace.
Espero que me logres comprender amigo

Responder
JMiur  

Eso implica muchas cosas. La sidebar tiene varias reglas de estilo y además, utiliza imágenes.

La palantilla se llama NeutroMac y entiendo que peude ser descargada desde acá:
www.deluxetemplates.net

Responder
SoyLeyenda  

Man si yo tengo un height d 500px y le pongo un border 5px solid

mi height aumenta a 505??

JMiur  

Si el borde es de 5 pixeles la altura será de 510 porque son 5 arriba y 5 abajo.

Responder
alvaro  

¿No existe la propieda outside, inside y center para los bordes?, ¿que broma es esta?

JMiur  

Tampoco existen las propiedades extended, circular, infinite, demolition, reloaded ni funky y no es broma.

Es más, la cantidad de propiedades inexistentes es muchísimo más larga que la cantidad de propiedades existentes.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR