---
id: 61adc91467b5d59328b9f781
title: الخطوة 79
challengeType: 0
dashedName: step-79
---

# --description--

في المشروع الأخير، تعلمت القليل عن الحدود (borders) و الخاصية `border-color`.

جميع عناصر HTML لديها حدود، على الرغم من أنها عادة ما يتم تعيينها إلى `none` بشكل افتراضي. باستخدام CSS، يمكنك التحكم في جميع جوانب حدود العنصر، وتعيين الحدود على جميع الجهات، أو على جانب واحد في كل مرة. لكي تكون الحدود ظاهرة، تحتاج إلى تعيين عرضها (width) ونمطها (style).

في قاعدة CSS لـ `.sleeve`، أضف خاصية `border-left-width` مع القيمة `10px`.

# --hints--

قاعدة CSS لـ `.sleeve`، يجب ان تحتوي علي خاصية `border-left-width` مع القيمة `10px`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px');
```

# --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);
}
--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%));
}

```
