---
id: 61add79e739a5faee9d96080
title: الخطوة 80
challengeType: 0
dashedName: step-80
---

# --description--

الحدود لديها عدة أنماط للاختيار منها. يمكنك أن تجعل حدودك خطا صلبا (solid line)، ولكن يمكنك أيضا استخدام خط مقطوع (dashed) أو منقط (dotted) إذا أردتم ذلك. وربما تكون الخطوط الحدودية الصلبة (solid border lines) هي الأكثر شيوعا.

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

# --hints--

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

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

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

```
