Propriedades de contorno CSS

Índice

Um contorno é uma linha desenhada fora da borda do elemento.

This element has a black border and a green outline with a width of 10px.

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

Esboço CSS

Um contorno é uma linha desenhada ao redor dos elementos, FORA das bordas, para fazer o elemento "se destacar".

CSS tem as seguintes propriedades de contorno:

outline-style
outline-color
outline-width
outline-offset
outline

Nota: O contorno difere das bordas! Ao contrário da borda, o contorno é desenhado fora da borda do elemento e pode se sobrepor a outro conteúdo. Além disso, o esboço é NÃO faz parte das dimensões do elemento; a largura e altura total do elemento não é afetado pela largura do contorno.

Estilo de esboço CSS

A propriedade outline-style especifica o estilo do esboço, e pode ter um dos seguintes valores:

dotted: - Define um contorno pontilhado
dashed: - Define um contorno tracejado
solid: - Define um contorno sólido
double: - Define um contorno duplo
groove: - Define um contorno ranhurado 3D
ridge: - Define um contorno estriado 3D
inset: - Define um contorno de inserção 3D
outset: - Define um contorno inicial 3D
none: - Não define nenhum contorno
hidden: - Define um contorno oculto

O exemplo a seguir mostra os diferentes valores de estilo de contorno:

Exemplo

Demonstração dos diferentes estilos de contorno:

 p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Resultado:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Nota: Nenhuma das outras propriedades do contorno (sobre as quais você aprenderá mais nos próximos capítulos) terá QUALQUER efeito, a menos que o A propriedade class="w3-codespan">outline-style está definida!