border-style

Pruébalo

border-style: none; 

border-style: dotted; 

border-style: inset; 

border-style: dashed solid; 

border-style: dashed double none; 

border-style: dashed groove none dotted; 

<section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> 

#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: #fff; } 

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

border-style = 
 <'border-top-style'>{1,4} 

<border-top-style> = 
 <line-style> 

<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

Compatibilidad con navegadores

Ver también

• The border-related shorthand CSS properties: border, border-width, border-color, border-radius