los border-bottom-styleCSS propiedad establece el estilo de línea de la parte inferior de un elemento border.

Nota: La especificación no define cómo los bordes de diferentes estilos se conectan en las esquinas.

Sintaxis

/* Keyword values */border-bottom-style: none;border-bottom-style: hidden;border-bottom-style: dotted;border-bottom-style: dashed;border-bottom-style: solid;border-bottom-style: double;border-bottom-style: groove;border-bottom-style: ridge;border-bottom-style: inset;border-bottom-style: outset;/* Global values */border-bottom-style: inherit;border-bottom-style: initial;border-bottom-style: unset;

los border-bottom-style La propiedad se especifica como una sola palabra clave elegida entre las disponibles para el border-style propiedad.

Definicion formal

Valor inicial none
Se aplica a todos los elementos. También se aplica a ::first-letter.
Heredado no
Valor calculado Como se especificó
Tipo de animación discreto

Sintaxis formal

where 
 = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Ejemplos de

Demostrar todos los estilos de borde

HTML

<table><tr><tdclass="b1">nonetd><tdclass="b2">hiddentd><tdclass="b3">dottedtd><tdclass="b4">dashedtd>tr><tr><tdclass="b5">solidtd><tdclass="b6">doubletd><tdclass="b7">groovetd><tdclass="b8">ridgetd>tr><tr><tdclass="b9">insettd><tdclass="b10">outsettd>tr>table>

CSS

/* Define look of the table */tableborder-width: 3px;background-color: #52E385;tr, tdpadding: 3px;/* border-bottom-style example classes */.b1border-bottom-style: none;.b2border-bottom-style: hidden;.b3border-bottom-style: dotted;.b4border-bottom-style: dashed;.b5border-bottom-style: solid;.b6border-bottom-style: double;.b7border-bottom-style: groove;.b8border-bottom-style: ridge;.b9border-bottom-style: inset;.b10border-bottom-style: outset;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de fondos y bordes CSS, nivel 3
La definición de ‘estilo de borde inferior’ en esa especificación.		 Recomendación candidata Ningún cambio significativo.
CSS Nivel 2 (Revisión 1)
La definición de ‘estilo de borde inferior’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
border-bottom-style 1 12 1Antes de Firefox 50, los estilos de borde de esquinas redondeadas (con border-radius) siempre fueron renderizados como si border-bottom-style era solid. Esto se ha solucionado en Firefox 50. 5.5 9.2 1 ≤37 18 4Antes de Firefox 50, los estilos de borde de esquinas redondeadas (con border-radius) siempre fueron renderizados como si border-bottom-style era solid. Esto se ha solucionado en Firefox 50. 14 1 1.0

Ver también

  • Las otras propiedades de borde relacionadas con el estilo: border-left-style, border-right-style, border-top-style, y border-style.
  • Las otras propiedades relacionadas con el borde inferior: border-bottom, border-bottom-color, y border-bottom-width.