Codrops Playground

#cssref border-bottom by SaraSoueidan

HTML

8
 
1
<div class="container">
2
  <p>Change the values of the <code>border-bottom</code> property to see how the top border changes.</p>
3
  <div class="element">
4
    <p>
5
      I have a 5px solid green bottom border.
6
    </p>
7
  </div>
8
</div>

CSS

18
 
1
body {
2
  background-color: #F5F5F5;
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 0;
10
  max-width: 700px;
11
}
12
13
.element {
14
  padding: 20px;
15
  height: 300px;
16
  background-color: white;
17
  border-bottom: 5px solid #009966;
18
}

JS

1
 
1

#cssref border-bottom

by SaraSoueidan on

Demo for the Codrops CSS Reference entry border-bottom

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 :)