» » » » Propiedad border

Propiedad border


border

►La propiedad border-color se utiliza para establecer el color de la frontera.

El color se puede ajustar por:

  • name - especificar un nombre de color, como "red"
  • rgb - especificar un valor RGB, como "rgb (255,0,0)"
  • hex- especificar un valor hexadecimal, como "# FF0000"


Ancho del borde

La propiedad border-width se usa para establecer el ancho de la frontera.
El ancho se establece en píxeles (px), o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso.


Ejemplos de valores de border-style:

none: Define ninguna frontera



dotted: Define un borde de puntos


Ej: border: 3px dotted rgb(255, 0, 0);



dashed: Define un borde punteado

Ej: border: 2px dashed rgb(255, 0, 0);



solid: Define un borde sólido

Ej: border: 2px solid rgb(0, 0, 0);



double: Define dos fronteras. La anchura de las dos fronteras son los mismos que el valor de border-width

Ej: border: 4px double rgb(255, 0, 0);



groove: Define un borde acanalado 3D. El efecto depende del valor de border-color

Ej: border: 10px groove rgb(189,179,251);



ridge: Define un borde estriado 3D. El efecto depende del valor de border-color

Ej: border: 8px ridge rgb(14, 131, 9);



inset: Define una frontera inserción 3D. El efecto depende del valor de border-color

Ej: border: 10px inset rgb(239,61,182);



outset: Define una frontera comienzo 3D. El efecto depende del valor de border-color

Ej: border: 8px outset rgb(255, 204,102);

#contenedor {
border-style: solid;
border-width: 5px;
}
#contenedor {
border-style: solid;
border-width: medium;
}

Se pueden combinar


#contenedor{
border-bottom-style: dashed;
border-left-style: double;
border-right-style: solid;
border-top-style: dotted;
}


Se pueden combinar 


 #contenedor{border-top-color: #FFCC66;border-top-style: dotted; border-right-width: 5px; border-right-color: #FF0000; border-right-style: solid; border-bottom-color: #BDB3FB; border-bottom-style: double; border-bottom-width: 15px; border-left-color: #EF3DB6; border-left-style:groove;}



✔Aclaración: La propiedad "border-width" no funciona si se utiliza sola, hay que utilizar "border-style" para establecer  primero las fronteras.


Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top