Fronteira - CSS-Tricks

A borderpropriedade é uma sintaxe abreviada em CSS que aceita vários valores para desenhar uma linha ao redor do elemento ao qual é aplicada.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Valores

A borderpropriedade aceita um ou mais dos seguintes valores em combinação:

border: || || 

• border-width: Especifica a espessura da borda.
  • : Um valor numérico medido em px, em, rem, vhe vwunidades.
  • thin: O equivalente a 1px
  • medium: O equivalente a 3px
  • thick: O equivalente a 5px
• border-style: Especifica o tipo de linha desenhada ao redor do elemento, incluindo:
  • solid: Uma linha sólida e contínua.
  • none (padrão): Nenhuma linha é desenhada.
  • hidden: Uma linha é desenhada, mas não visível. isso pode ser útil para adicionar um pouco mais de largura a um elemento sem exibir uma borda.
  • dashed: Uma linha que consiste em travessões.
  • dotted: Uma linha que consiste em pontos.
  • double: Duas linhas são desenhadas ao redor do elemento.
  • groove: Adiciona um chanfro com base no valor da cor de forma que o elemento pareça pressionado no documento.
  • ridge: Semelhante a groove, mas inverte os valores da cor de uma forma que faz o elemento parecer elevado.
  • inset: Adiciona um tom dividido à linha que faz com que o elemento pareça ligeiramente deprimido.
  • outset: Semelhante a inset, mas inverte as cores de uma forma que faz o elemento parecer ligeiramente elevado.
• color: Especifica a cor da borda e aceita ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

cromada	Safári	Raposa de fogo	Ópera	IE	Android	iOS
Nenhum	Nenhum	Nenhum	3,5+	4+	Nenhum	Nenhum

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####