---
id: 61adc91467b5d59328b9f781
title: Hatua ya 79
challengeType: 0
dashedName: step-79
---

# --description--

Katika mradi uliopita, ulijifunza kidogo kuhusu mipaka na sifa ya `border-color`.

Vipengele vyote vya HTML vina mipaka, ingawa kwa kawaida huwekwa kuwa `none` kwa chaguo-msingi. Ukiwa na CSS, unaweza kudhibiti vipengele vyote vya mpaka wa kipengele na kuweka mpaka pande zote, au upande mmoja tu kwa wakati mmoja. Ili mpaka uonekane, unahitaji kuweka upana wake na mtindo.

Katika sheria ya CSS ya `.sleeve`, ongeza `border-left-width` yenye thamani ya `10px`.

# --hints--

Sheria yako ya CSS ya `.sleeve` inapaswa kuwa na sifa ya `border-left-width` yenye thamani ya `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%));
}

```
