---
id: 61add929e41980b1edbdba7e
title: الخطوة 81
challengeType: 0
dashedName: step-81
---

# --description--

يجب أن تكون حدودك مرئية الآن. إذا لم يتم تعيين أي لون، يتم استخدام الأسود بشكل افتراضي.

لكن لجعل الكود الخاص بك أكثر قابلية للقراءة، من الأفضل تعيين لون الحدود بنفسك.

في قاعدة CSS مسمى `.sleeve`، أضف خاصية `border-left-color` مع القيمة `black`.

# --hints--

قاعدة CSS مسمى `.sleeve`، يجب أن تحتوي علي خاصية `border-left-color` مع القيمة `black`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

--fcc-editable-region--
.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left-width: 10px;
  border-left-style: solid;
}
--fcc-editable-region--

.cap, .sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
