CSS border-top-color example

dabblet.css

/**
 * CSS border-top-color example
 * http://docs.webplatform.org/wiki/css/properties/border-top-color
 */
 
body {
  margin: 0 auto;
  width: 80%;
}

h1 {
  font-size: 1em;
}
 
.box {
  border: 5px solid #efefef;
  
  /* Extra styling for decoration. */
  font: 1em sans-serif;
  color: #444;
  text-shadow: 0 1px #dedede;
  width: 200px;
  height: 80px;
  margin: 10px 10px;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  float: left;
}

.named-value {
  border-top-color: red;
}

.hex-value {
  border-top-color: #FD6C02;
}

.rgb-value {
  border-top-color: rgb(255, 255, 0);
}

.rgb-percentage-value {
  border-top-color: rgb(0%, 100%, 0%);
}

.hsl-value {
  border-top-color: hsl(240, 100%, 50%);
}

.rgba-value {
  border-top-color: rgba(75, 0, 130, 0.8);
}

.hsla-value {
  border-top-color: hsla(282, 100%, 41%, 0.8);
}

dabblet.html

<div class="box named-value">
  <h1>Named color</h1>
  <p><code>red</code></p>
</div>
<div class="box hex-value">
  <h1>Hexadecimal color</h1>
  <p><code>#FD6C02</code></p>
</div>
<div class="box rgb-value">
  <h1>RGB color</h1>
  <p><code>rgb(255, 255, 0)</code></p>
</div>
<div class="box rgb-percentage-value">
  <h1>RGB percentage color</h1>
  <p><code>rgb(0%, 100%, 0%)</code></p>
</div>
<div class="box hsl-value">
  <h1>HSL color</h1>
  <p><code>hsl(240, 100%, 50%)</code></p>
</div>
<div class="box rgba-value">
  <h1>RGB with alpha color</h1>
  <p><code>rgba(75, 0, 130, 0.8)</code></p>
</div>
<div class="box hsla-value">
  <h1>HSL with alpha color</h1>
  <p><code>hsla(282, 100%, 41%, 0.8)</code></p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}