Vamos a seguir con los ejemplos CSS de tipos de bordes en los que ya hemos visto cómo insertar imágenes con borde en nuestras páginas web y cómo crear un borde con líneas discontinua para poder aplicarlo en cualquier elemento de tipo caja de nuestros diseños. En el caso de hoy, vamos a ver cómo podemos crear un borde con doble linea mediante CSS. Este tipo de borde lo podremos aplicar sobre cualquier elemento de tipo caja que hayamos incluido en el diseño de nuestras páginas web.
Lo primero que tenemos que saber es que 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 el elemento style o directamente mediante el atributo style de los elementos HTML. Eso ya dependerá de las veces que quieras reutilizar el estilo, en el caso de lo vayas a reutilizar en muchos elementos es recomendable la primera opción, y en el caso de que sea algo puntual lo recomendable será optar por la segunda opción.
En este ejemplo, para poder obtener un borde con doble linea, 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. Así, sobre el elemento div, que representa una capa en HTML, añadimos nuestro código CSS:
<div style="border-style:double"> ... </div>
Aunque podemos definirlo en cualquier otro elemento. Por ejemplo, en una imagen, que es representada mediante un elemento img en HTML, el código que tendríamos sería el siguiente:
<img src="lineadecodigo.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.
¿Cómo definirías un estilo para poder tener un borde de doble línea que podamos aplicar a muchos elementos de tu diseño? ¿Nos lo cuentas en los comentarios?
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
@Daniel P Z, gracias por la ayuda a los compañeros. Se agradece mucho.
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
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/
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.
bea
pero… como puedo elegir los colores??
kevin
creo que ya es muy tarde para responder pero usamos colores rgb o hexadesimales (creo que asi se escribe xD)