👩🏽‍💻 CSS | Combinando outline e border

Foto de Medhat Ayad no Pexels

Recentemente, estive me atualizando sobre outline, que em português tem sido traduzido como contorno. O contorno é uma linha que não ocupa espaço e está além da borda. Uma moldura, se pensarmos num quadro. Quando usamos as duas propriedades, a gente vê uma borda em volta da borda.

Uma forma interessante de ver como outline não ocupa espaço é usando hover. No computador, passe o mouse sobre os links abaixo:

Se ainda não aprendeu a usar bordas, sugiro que comece pelo texto de 2008: CSS: aprendendo a usar bordas. Este foi um exemplo com border (borda).

Outra forma interessante de personalizar as bordas é arredondando: Bordas arredondadas com CSS 3. Este foi um exemplo com outline (contorno).

Como você notou se estiver usando um computador, o texto não se desloca quando aparece o outline, já que o contorno não ocupa espaço extra. Já com border, o texto se desloca para acomodar a borda.

Outra diferença importante é que outline sempre será um contorno completo e padronizado. Não existem propriedades de outline para left, right, top e bottom, como é o caso de border.

div.quadro { padding:10px; border-left:5px solid purple; border-right:5px double olive; border-top:5px groove red; border-bottom:5px dashed #3C1414; outline:5px dotted deeppink; outline-offset:2px; } div.quadro:hover { padding:10px; border-left:5px dashed #3C1414; border-right:5px groove red; border-top:5px solid purple; border-bottom:5px double olive; outline:5px dotted green; outline-offset:2px;}

Neste quadro, cada borda é de um jeito, mas o contorno é padronizado. outline-offset separa a borda do contorno, para não ficar tudo grudado.

No exemplo acima, também é possível notar que outline pode agrupar: outline-width, outline-style e outline-color, nesta ordem. Mas outline-offset deve ser uma propriedade separada.

Quanto aos estilos de contorno, são os mesmos das bordas:

outline-width:5px; outline-style: dotted; outline-color:#093;

outline-width:5px; outline-style: dashed; outline-color:#093;

outline-width:5px; outline-style: double; outline-color:#093;

outline-width:5px; outline-style: solid; outline-color:#093;

outline-width:5px; outline-style: inset; outline-color:#093;

outline-width:5px; outline-style: outset; outline-color:#093;

outline-width:10px; outline-style: groove; outline-color:#093;

outline-width:10px; outline-style: ridge; outline-color:#093;

Agora, finalmente vamos brincar de combinar border e outline:

outline:5px dotted #903; border:5px dotted #903;

outline:5px dashed #8F9779; border:5px dashed #96C8A2;

outline:5px double orange; border:5px double gold; outline-offset:1px;

outline:5px groove #7366BD; border:5px groove #6788cc;

outline:5px outset #9c0; border:5px outset olive;

outline:5px inset #8A3324; border:5px inset #cd5c5c;

Os primeiros testes que fiz estão no CodePen, onde você pode testar também:

Veja border ou outline? da Helen Fernanda (@helenfernanda) no CodePen.

Você encontra mais informações sobre outline nos sites MDN e W3Schools.

Até mais!