Estilos de bordes en css (border-style)

Estilos de bordes en css (border-style)

Estilos de bordes en css (border-style)

En este tutorial aprenderemos cuáles son los principales estilos de bordes en Css.

  • none: Sin borde. {border: 2px none blue;}
Ejemplo de border-style none en Css
Ejemplo borde none
  • hidden: Con el estilo hidden aparentemente no hay diferencia con none pero hay diferencias cuando se trata de una tabla. {border: 2px hidden blue;}
Ejemplo de border-style hidden en Css
Ejemplo borde hidden
  • dotted: Borde de puntos. {border: 2px dotted blue;}
Ejemplo de border-style dotted en Css
Ejemplo borde dotted
  • dashed: Borde de líneas. {border: 2px dashed blue;}
Ejemplo de border-style dashed en Css
Ejemplo borde dashed
  • solid: Borde de línea contínua. {border: 2px solid blue;}
Ejemplo de border-style solid
Ejemplo borde solid
  • double: Borde de dos líneas. A partir de 4 píxels. {border: 4px double blue;}
Ejemplo de border-style double en Html
Ejemplo borde double
  • groove: Borde con una especie de relieve. {border: 8px groove grey;}
Ejemplo de border-style groove en Html
Ejemplo borde groove
  • ridge: Borde con otro relieve. {border: 8px ridge grey;}
Ejemplo de border-style ridge en Html
Ejemplo borde ridge
  • inset: Borde con efecto de botón pulsado, hundido. {border: 12px inset grey;}
Ejemplo de border-style inset en Html
Ejemplo borde inset
  • outset: Borde con efecto de botón. {border: 12px outset grey;}
Ejemplo de border-style outset en Html
Ejemplo borde outset

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas