JMiur [E]

Y ahora le toca el turno a los bordes cuya propiedad genérica es border y que es una propiedad muy sencilla aunque posee un sinfín de posibles instrucciones.

Recordemos que, todo elemento de una página web es un rectángulo y por lo tanto, tiene cuatro bordes. La propiedad genérica border establece todas las propiedades que afectan a esos cuatro bordes al mismo tiempo y se usa para evitar escribir cada una de ellas por separado:
border-width | border-style | border-color

sintaxis en HTML
elemento {border: valores;}
por ejemplo: div {border: 2px solid #BB0000;}

sintaxis en JAVASCRIPT
elemento.style.{border='valores';
por ejemplo: this.style.background='2px solid #BB0000';

Donde el orden de los valores es: width style color. A su vez, cada una de ellas puede ser especificada por separado.

La propiedad border-color establece el color y por defecto su valor es igual al color del texto.

sintaxis en HTML
elemento {border-color: color;}
por ejemplo: div {border-color: #BB0000;}

sintaxis en JAVASCRIPT
elemento.style.borderColor='color';
por ejemplo: this.style.borderColor='#BB0000';

El color puede ser un nombre, un valor rgb() o un valor hexadecimal.
  • Si establecemos un color, este se usará para los cuatro bordes.
  • Si establecemos dos colores, el primero será el de los bordes horizontales y el segundo el de los verticales.
  • Si establecemos tres colores, el primero será el del borde superior, el segundo el de los verticales y el tercero el del borde inferior.
  • Si establecemos cuatro colores definirán los colores de los bordes superior, derecho, inferior e izquierdo respectivamente.
Los colores los separamos mediante espacios; por ejemplo:

table {border-color: red green blue;}

La propiedad border-width establece el grosor de los bordes.

sintaxis en HTML
elemento {border-width: valor;}
por ejemplo: div {border-width: 2px;}

sintaxis en JAVASCRIPT
elemento.style.borderWidth='valor';
por ejemplo: this.style.borderWidth='2px';

Al igual que con borderColor, podemos separar varios valores mediante un espacio y combinando unidades:

table {border-color: 2px 3cm 1.2em;}

Por último, la propiedad border-style establece el tipo de borde.

sintaxis en HTML
elemento {border-style: valor;}
por ejemplo: div {border-style: solid;}

sintaxis en JAVASCRIPT
elemento.style.borderStyle='valor';
por ejemplo: this.style.borderStyle='solid';

Los valores posibles a utilizar son: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.

Al igual que borderColor, podemos separar varios valores mediante un espacio:

table {border-style: solid dotted dashed;}




Cada borde puede ser definido de manera individual así que también existen las mismas propiedades para cada uno de ellos:

HTMLJAVASCRIPT
border-topborder-top-widthborderTopborderTopWidth
border-top-styleborderTopStyle
border-top-colorborderTopColor
border-rightborder-right-widthborderRightborderRightWidth
border-right-styleborderRightStyle
border-right-colorborderRightColor
border-bottomborder-bottom-widthborderBottomborderBottomWidth
border-bottom-styleborderBottomStyle
border-bottom-colorborderBottomColor
border-leftborder-left-styleborderLeftborderLeftStyle
border-left-colorborderLeftColor
border-left-widthborderLeftWidth

Muchos códigos pero, en la práctica, lo mas usual es que utilicemos border si queremos que todos sean iguales, es decir, si estamos recuadrando algo o, eventualmente las propiedades que controlan alguno de ellos (border-top, border-right, border-bottom, border-left):

LOS TITULO
ALGO
SEPARADOR

Es muy importante tener en cuenta que los navegadores agregan los bordes de diferente manera y eso puede causarnos trastornos que cuesta resolver. Algunas de esas diferencias se refieren al aspecto gráfico, por ejemplo IE muestra el estilo dotted como dashed, en lugar de puntos, pone rayas; pero, lo más significativo se refiere a dónde ubican los bordes.

Supongamos que tenemos dos elementos exactamente iguales pero a uno le colocamos un borde y al otro no. Por ejemplo:
<div style="width:250px; height:100px;background-color:Aquamarine;border:none;"></div>
Hemos creado un bloque de 250 pixeles de ancho por 100 pixeles de alto con un color de fondo cualquiera; podría ser nuestra sidebar. Hasta acá, no hay problema pero, decidimos que tenga un borde; seamos exagerados, digamos que el borde será de 10 pixeles de ancho:
<div style="width:250px;height:100px;background-color:Aquamarine;border:10px solid red;"></div>
¿Qué pasará? ¿cuánto medirá nuestro bloque? ¿Dónde se agrega el borde? ¿afuera o adentro de ese rectángulo?

Eso, dependerá del navegador. En Internet Explorer el borde se dibuja ADENTRO por lo que el bloque verde se reduce en 10 pixeles en todo su perímetro, tendremos entonces un "área verde" de 230 pixeles por 80 pixeles, el borde le ha "comido" superficie.


En Firefox el borde se dibuja AFUERA por lo que el bloque verde permanece del mismo tamaño pero requiere más espacio alrededor así que nuestro elemento, termina siendo de 270 pixeles por 120 pixeles.


En realidad, cualquiera de las dos alternativas puede ser aceptable y habrá quien defienda una posición o la otra, nuestro problema no es si la regla es buena o mala sino que hay dos diferentes y deberemos lidiar con ellas hasta que se pongan de acuerdo de una buena vez y nos dejen de fastidiar.

MÁS INFORMACIÓN:
  • Las imágenes (Bordes)
  • CSS y los textos (parte 2)

  • SUMARIO:
  • Las propiedades CSS (background)
  • 7 comentarios:

    Unknown  

    JMiur
    Como decimos aqui en la Costa:
    (Barranquilla-Colombia)
    "Nojodaaa estas sobra'o"

    Excelentes blogs.
    Habia impreso 2 manuales de CSS, y sabia que les faltaba mucho y muy pocos ejemplos, alfinal solo aplicaba cosas basicas, tenia una cantidad de informacion que nosabia como aplicarla.

    Gracias Jmiur, estoy aprendiendo mucho con Ud.

    Atte Juan Pua.

    Responder
    JMiur  

    Me alegro que te sirva jhon, el CSS es interesante y sólo requiere dos cosas, paciencia y mucha prueba/error.

    Responder
    Eulalia  

    Y a veces, pones un borde y lo ves en uno y no en el otro ¿porqué?
    Me sucede en mi blog "Tuneando el blog" Tengo enmarcado el post-tittle y el post-footer con el mismo estilo de borde, incluso el mismo color. Con explorer los veo los dos, con Firefox, solo veo el del pie del post. Misterios de los navegadores.
    Saludos.

    Responder
    Roberto Caamaño  

    Entonces no hay problema de modificar los bordes que hay en la plantilla con CSS

    Responder
    JMiur  

    Muchas veces eso se debe a la diferencia entre los navegadores, Firefox requiere más espacio pero no es tu caso, allí la explicació es otra. Simplemente es un error de sintaxis.

    Ahora dice esto:

    h2.date-header {margin:2em 0 .5em;color: #a9501b;
    font: italic bold 86% Verdana, sans-serif;}
    margin:.5em 0 1.5em;}
    .post h3 {margin:.25em 0 0;padding:5 5 5px;
    font-size:120%;text-align:center;font-weight:normal;
    border: 2px outset;border-color:#99ff00;
    line-height:1.4em;color:#003366;}

    Eso en negrita es el error.

    Responder
    Davicín  

    Hola.
    Tengo un problema con los bordes entre ie y firefox, ya q tengo varias capas con bordes y no consigo cuadrarlos en los dos. Cuando uno está cuadrod al otro le falta 1 ó 2 px...
    ¿Qué solución podría tomar, aparte de la de tener 2 css que no me gusta mucho?

    Muchas gracias

    Responder
    JMiur  

    Davicín:
    Debería ver el ejemplo online. pero, a veces, no tiene solución ya que ambos navegadores calculan las cosas de manera diferente.

    Responder

    ¿Quiere dejar un comentario?

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

    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