outline-color<\/code>propriedade \u00e9 usada para definir a cor do contorno.<\/p>\nA cor pode ser definida por:<\/p>\n
\n- nome – especifique um nome de cor, como “vermelho”<\/li>\n
- HEX – especifique um valor hexadecimal, como “# ff0000”<\/li>\n
- RGB – especifique um valor RGB, como “rgb (255,0,0)”<\/li>\n
- HSL – especifique um valor HSL, como “hsl (0, 100%, 50%)”<\/li>\n
- inverter – executa uma invers\u00e3o de cores (que garante que o contorno seja vis\u00edvel, independentemente do fundo da cor)<\/li>\n<\/ul>\n
O exemplo a seguir mostra alguns contornos diferentes com cores diferentes.\u00a0Observe tamb\u00e9m que esses elementos tamb\u00e9m possuem uma borda preta fina dentro do contorno:<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/esboco-css-css-outline-color-1.png\")
<\/p>\n
p.ex1 {\r\n border: 2px solid black;\r\n outline-style: solid;\r\n outline-color: red;\r\n}\r\n\r\np.ex2 {\r\n border: 2px solid black;\r\n outline-style: dotted;\r\n outline-color: blue;\r\n}\r\n\r\np.ex3 {\r\n border: 2px solid black;\r\n outline-style: outset;\r\n outline-color: grey;\r\n}<\/pre>\nTente voc\u00ea<\/p>\n
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.ex1 {\r\n border: 2px solid black;\r\n outline-style: solid;\r\n outline-color: red;\r\n}\r\n\r\np.ex2 {\r\n border: 2px solid black;\r\n outline-style: dotted;\r\n outline-color: blue;\r\n}\r\n\r\np.ex3 {\r\n border: 2px solid black;\r\n outline-style: outset;\r\n outline-color: grey;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The outline-color Property<\/h2>\r\n<p>The outline-color property is used to set the color of the outline.<\/p>\r\n\r\n<p class=\"ex1\">A solid red outline.<\/p>\r\n<p class=\"ex2\">A dotted blue outline.<\/p>\r\n<p class=\"ex3\">An outset grey outline.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n <\/p>\n
Valores HEX<\/h2>\n
A cor do contorno tamb\u00e9m pode ser especificada usando um valor hexadecimal (HEX):<\/p>\n
<\/p>\n
p.ex1 {<\/code>
\noutline-style: solid;<\/code>
\noutline-color: #ff0000; \/* red *\/<\/code>
\n}<\/code><\/p>\n <\/p>\n
Valores RGB<\/h2>\n
Ou usando valores RGB:<\/p>\n
p.ex1 {<\/code>
\noutline-style: solid;<\/code>
\noutline-color: rgb(255, 0, 0); \/* red *\/<\/code>
\n}<\/code><\/p>\nInverter Cor<\/h2>\n
<\/p>\n
O exemplo a seguir usa\u00a0outline-color: invert<\/code>, que executa uma invers\u00e3o de cores.\u00a0Isso garante que o contorno fique vis\u00edvel, independentemente do fundo da cor:<\/p>\np.ex1 {<\/code>
\nborder: 1px solid yellow;<\/code>
\noutline-style: solid;<\/code>
\noutline-color: invert;<\/code>
\n}<\/code><\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/esboco-css-css-outline-color.png\")
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.ex1 {\r\n border: 1px solid yellow;\r\n outline-style: solid;\r\n outline-color: invert;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Using outline-color:invert<\/h2>\r\n\r\n<p class=\"ex1\">A solid invert outline.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n