Borde con doble linea mediante CSS

12/Jul/2007 CSS 7 Comentarios

Siguiendo con los ejemplos CSS de tipos de bordes. Ya hemos visto:

Vamos a ver como hacer que la línea del borde sea doble. Para obtener un borde con doble linea mediante CSS utilizamos nuevamente el atributo border-style. En este caso, el valor que hay que darle, para que la línea sea doble es "double".

Las formas de definir un estilo son varias. Por ejemplo podemos hacerlo mediante la etiqueta style o directamente mediante el atributo style de los elementos HTML.

Para obtener un borde con doble linea mediante CSS vamos a utilizar la segunda forma. Vamos a definir una capa de contenido y ha aplicarle el estilo de borde con línea de doble.

La linea de código sería la siguiente:

  1. <div style="border-style:double">
  2. ...
  3. </div>

Aunque podemos definirlo en cualquier otro elemento. Por ejemplo, en una imagen:

  1. <img src="/lineadecodigo.miniatura.jpg" style="border-style:double">

Espero que os haya gustado y que os sea de utilizar el saber cómo podemos definir un borde con doble linea mediante CSS.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

7 comentarios en “Borde con doble linea mediante CSS”

Víctor Cuervo

Víctor Cuervo

@Daniel P Z, gracias por la ayuda a los compañeros. Se agradece mucho.

Víctor Cuervo

Daniel P Z

Respondiendo el primer mensaje de el usuario “bea”, asi se eligen los colres:

border:1px solid #CCCCCC; padding:2px; background:#fff;

Eso lo pones logicamente declarandolo en tu oja de estilo

Víctor Cuervo

Ricardo

mira lo que yo quiero saber es aprender a utilizar este tipo de lineas
————————————————————
lo que pasa es que estoy haciendo un ejercicio con ese tipo de estilo pero no tengo ni idea de como hacerlo bueno seguire buscando apenas voy iniciando estas cosas agradeceria mucho su respuesta en caso de que no encontrar lo que busco
adiios

Víctor Cuervo

patricio

señores: si les es de ayuda, para probar los codigos si necesidad de insertarlo inmediatamente en su pagina usen el real time html editor (funciona solo con html y css) ahorras tiempo dado que puedes ver los resultados antes de aplicar el codigo buscado, ademas puedes modificar en linea el codigo origina y los reslutados son en tiempo real, en la parte superior pegas el codigo y en la inferior se ve el resultado, ojala les sirva aqui les dejo la direccion:

http://htmledit.squarefree.com/

Víctor Cuervo

Nico

Una forma que permite elegir la separación entre las líneas y el color es la siguiente:
style=”border: 5px double red;”
De esta manera la doble línea tendrá una separación de 5px será de color rojo. Ambas cosas se pueden cambiar a gusto, si en vez de 5px se pone 10px la separación será mayor, y en lugar de red (rojo) se puede poner otro color.

Víctor Cuervo

bea

pero… como puedo elegir los colores??

Víctor Cuervo

kevin

creo que ya es muy tarde para responder pero usamos colores rgb o hexadesimales (creo que asi se escribe xD)

Los comentarios están cerrados.