Característica border-bottom-style en CSS

La propiedad border-bottom-style CSS establece la forma de la fuente del marco inferior de un elemento.

Funciones border-bottom-style css

Valor inicial	`none`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* palabras reservadas */ 
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;
/* valores globales */ 
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: unset;

Nota: La especificación no define cómo los neumáticos de diferentes formas se unirán en las esquinas.

Ejemplos y aplicaciones

Este es un ejemplo de una tabla <table> que muestra las diferentes formas de marcos a través de border-bottom-style.

Código HTML:

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

Código CSS:

tr, td {
  padding: 5px;
}
.b1  {border-bottom-style: none;   }
.b2  {border-bottom-style: hidden; }
.b3  {border-bottom-style: dotted; }
.b4  {border-bottom-style: dashed; }
.b5  {border-bottom-style: solid;  }
.b6  {border-bottom-style: double; }
.b7  {border-bottom-style: groove; }
.b8  {border-bottom-style: ridge;  }
.b9  {border-bottom-style: inset;  }
.b10 {border-bottom-style: outset; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	5.5	9.2	1.0

Características generales

<br-style>

La propiedad border-bottom-style acepta una palabra reservada de las palabras reservadas disponibles para la propiedad border-style.

Estructura

border-bottom-style: <br-style>;

dónde:

<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Vea también

La página de propiedades establecida por la propiedad de acceso directo border-bottom: border-bottom-width y border-bottom-color.
La página de propiedades establecido por la propiedad de acceso directo border: border-width, border-style, y border-color.
Configure una imagen para el marco usando la función border-image.
Esquinas redondeadas y border-radius esquinas inferiores border-bottom-left-radius, border-bottom-right-radius.