border-style

This translation is incomplete. Please help translate this article from English

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 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 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.
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.
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>{1,4}

where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
border-styleChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1
Notas
Soporte completo 1
Notas
Notas Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
IE Soporte completo 4Opera Soporte completo 3.5Safari Soporte completo 1WebView Android Soporte completo 3Chrome Android Soporte completo 18Firefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android Soporte completo 14Safari iOS Soporte completo 3Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo
Ver notas de implementación.
Ver notas de implementación.

Ver también