Codrops Playground

#cssref outline-color by SaraSoueidan

HTML

9
 
1
<div class="container">
2
  <p>
3
    All of the following boxes have a 3px solid black border. The outline is drawn outside the border.
4
  </p>
5
  <div class="element one">I have a deepPink outline.</div>
6
  <div class="element two">I have an outline specified as a hexadecimal value.</div>
7
  <div class="element three">I have a translucent black outline.</div>
8
  <div class="element four">My outline has the default color. Try changing the background color; if the outline color changes accordingly then your browser supports pixel color inversion using the <code>invert</code> keyword.</div>
9
</div>

CSS

40
 
1
body {
2
  background-color: #fff;
3
  color: #555;
4
  font-size: 1.1em;
5
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
6
}
7
8
.container {
9
  margin: 40px auto;
10
  max-width: 700px;
11
}
12
13
.element {
14
  display: block;
15
  margin: 60px auto;
16
  max-width: 400px;
17
  padding: 20px;
18
  border: 3px solid black;
19
  background-color: white;
20
  text-align: center;
21
  outline-style: solid;
22
  outline-width: 5px;
23
}
24
25
.element:hover {
26
  background-color: #eee;
27
}
28
29
.one {
30
  outline-color: deepPink;
31
}
32
33
.two {
34
  outline-color: #0099CC;
35
}
36
37
.three {
38
  outline-color: rgba(0, 0, 0, 0.5);
39
}
40

JS

1
 
1

#cssref outline-color

by SaraSoueidan on

Demo for the Codrops CSS Reference entry outline-color

Codrops Logo Codrops Playground

Version 0.0.9 (alpha)

Codrops Playground is currently in development with many features to come, including mobile support. We are in alpha stage right now, so if you find a bug, please send a mail to playground@codrops.com or use the contact form on Codrops.

If you'd like to stay updated, follow us on Twitter @codrops. Thank you and stay tuned :)