Codrops Playground

#cssref border-right-style by SaraSoueidan

HTML

8
 
1
<div class="container">
2
  <p>Change the value of the <code>border-right-style</code> property to see how the border changes.</p>
3
  <div class="element">
4
    <p>
5
      I have a dotted right border and a skyblue background color.
6
    </p>
7
  </div>
8
</div>

CSS

21
 
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
  width: 90%;
11
}
12
​
13
.element {
14
  padding: 20px;
15
  background-color: skyblue;
16
  color: white;
17
  height: 200px;
18
  border-right-color: deepPink;
19
  border-right-width: 10px;
20
  border-right-style: dotted;
21
}

JS

1
 
1
​

#cssref border-right-style

by SaraSoueidan on

Demo for the Codrops CSS Reference entry border-right-style

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