border-style

La propiedad border-style CSS es una shorthand property (Propiedad abreviada) que establece el estilo de l铆nea para los cuatro lados del borde de un elemento.

Syntax

/* Keyword values */
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/* vertical | horizontal */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

La propiedad border-style se puede especificar usando uno, dos, tres o cuatro valores.

  • Cuando se especifica un valor, se aplica el mismo estilo a los cuatro lados.
  • Cuando se especifican dos valores, el primer estilo se aplica a la parte superior e inferior, el segundo a la izquierda y a la derecha
  • Cuando se especifican tres valores, el primer estilo se aplica a la parte superior, el segundo a la izquierda y derecha, el tercero a la parte inferior.
  • Cuando se especifican cuatro valores, los estilos se aplican a la parte superior, derecha, inferior e izquierda en ese orden (en el sentido de las agujas del reloj).

Cada valor es una palabra clave elegida de la siguiente lista.

Values

<br-style>
Describe el estilo del borde. Puede tener los siguientes valores:
none
Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width (en-US) will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden
Like the none keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width (en-US) will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.
dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width (en-US).
dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid
Displays a single, straight, solid line.
double
Displays two straight lines that add up to the pixel size defined by border-width or border-top-width (en-US).
groove
Displays a border with a carved appearance. It is the opposite of ridge.
ridge
Displays a border with an extruded appearance. It is the opposite of groove.
inset
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset

Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

Formal syntax

<line-style>{ (en-US)1,4} (en-US)

where
<line-style> = none | (en-US) hidden | (en-US) dotted | (en-US) dashed | (en-US) solid | (en-US) double | (en-US) groove | (en-US) ridge | (en-US) inset | (en-US) outset

Ejemplos

Tabla con todos los valores de propiedad

A continuaci贸n, se muestra un ejemplo de todos los valores de propiedad.

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>

CSS

/* Define look of the table */
table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

/* border-style example classes */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}

Output

Especificaciones

Especificacion  Estado Comentario
CSS Backgrounds and Borders Module Level 3
La definici贸n de 'border-style' en esta especificaci贸n.
Candidate Recommendation No change.
CSS Level 2 (Revision 1)
La definici贸n de 'border-style' en esta especificaci贸n.
Recommendation Adds hidden keyword value.
CSS Level 1
La definici贸n de 'border-style' en esta especificaci贸n.
Recommendation Initial definition.

Valor inicialas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Heredableno
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete

Compatibilidad del navegador

BCD tables only load in the browser

Ver tambi茅n