CSS border-color Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f8fafc;
  color: #1f2937;
  padding: 32px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  font-size: 20px;
  margin-bottom: 16px;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.box {
  width: 220px;
  height: 110px;
  padding: 12px;
  box-sizing: border-box;
  border-width: 6px;
  border-style: solid;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: white;
  font-size: 14px;
}

/* Examples of border-color usage */
.single {
  border-color: #e63946; /* single color for all four sides */
  background: #fff8f8;
}

.four {
  border-color: #2a9d8f #e9c46a #e76f51 #264653; /* top right bottom left */
}

.transparent {
  border-color: rgba(0, 0, 0, 0.2); /* semi-transparent border */
  background: #fbfbfb;
}

.current {
  color: rebeccapurple;
  border-color: currentColor; /* uses element's text color */
  background: #fff5ff;
}

.none {
  border-color: transparent; /* invisible border while keeping layout */
  background: #f3f4f6;
}
</style></head><body><div class="container">
  <h1>border-color examples</h1>
  <div class="examples">
    <div class="box single">border-color: #e63946;</div>
    <div class="box four">border-color: #2a9d8f #e9c46a #e76f51 #264653;</div>
    <div class="box transparent">border-color: rgba(0, 0, 0, 0.2);</div>
    <div class="box current">color: rebeccapurple;<br>border-color: currentColor;</div>
    <div class="box none">border-color: transparent;</div>
  </div>
</div></body></html>