The border-style property is a shorthand property for setting the line style for all four sides of the elements border.

  • Valor inicial: none ou como propriedades individuais
  • Aplica-se a: todos os elementos
  • Herdado: não
  • Porcentagens: N/A
  • Mídia: Visual
  • Valor computado: como em propriedades individuais


border-style: [ <border-style> ]{1,4} |inherit


The Border Style can be any of the following values.
  • none : No border, sets width to 0. This is the default value.
  • hidden : Same as 'none', except in terms of border conflict resolution for table elements.
  • dashed : Series of short dashes or line segments.
  • dotted : Series of dots.
  • double : Two straight lines that add up to the pixel amount defined as border-width.
  • groove : Carved effect.
  • inset : Makes the box appear embedded.
  • outset : Opposite of 'inset'. Makes the box appear 3D (embossed).
  • ridge : Opposite of 'groove'. The border appears 3D (coming out).
  • solid : Single, straight, solid line.

Up to four values can be given;
The first value sets all four borders.
The second sets the left and right.
The third sets the bottom.
The forth sets the Left.


View Live Examples

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;


By Default the border-style is set to none. This meant that if you change the border-width and the border-color you will not see the border unless you change this property to something other than none or hidden.


Compatibilidade com navegadores

Navegador Versão mais antiga
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Veja também

border, border-style, border-width, border-color, -moz-border-radius


Interwiki Language Links