Borde de CSS

Atributo de borde CSS

CSS border La propiedad permite especificar el estilo, anchura y color del borde del elemento.

Todos mis bordes tienen borde.

Tengo un borde inferior rojo.

Tengo bordes redondos.

Tengo un borde izquierdo azul.

Estilo de borde CSS

border-style La propiedad especifica el tipo de borde que se debe mostrar.

Se permiten los siguientes valores:

  • dotted - Definir borde de línea punteada
  • dashed - Definir borde de línea punteada
  • solid - Definir borde de línea sólida
  • double - Definir borde doble
  • groove - Definir borde 3D surco. El efecto depende del valor de border-color
  • ridge - Definir borde 3D ribete. El efecto depende del valor de border-color
  • inset - Definir borde 3D inset. El efecto depende del valor de border-color
  • outset - Definir borde 3D outset. El efecto depende del valor de border-color
  • none - Definir borde sin estilo
  • hidden - Definir borde oculto

border-style La propiedad puede establecer un valor de uno a cuatro (usado para el borde superior, derecho, inferior e izquierdo).

Ejemplo

Se muestran diferentes estilos de borde:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Resultado:

Borde de punto.

Borde de línea punteada.

Borde de línea sólida.

Borde de línea doble.

Borde en concavidad. Su efecto depende del valor de border-color.

Borde en relieve. Su efecto depende del valor de border-color.

Borde de inset 3D. Su efecto depende del valor de border-color.

Borde de outset 3D. Su efecto depende del valor de border-color.

Sin borde.

Borde oculto.

Borde mixto.

Prueba personalmente

Nota:A menos que se haya configurado border-style La propiedad de borde, de lo contrario, otras propiedades de borde CSS (que se explicarán en el siguiente capítulo) no tendrán ningún efecto!