CSS - SOMO LA 11: Mitindo ya Border (Border Styles)

Vizuri! Tuendelee na:

? Utangulizi

Borders ni mipaka inayoizunguka element yoyote ya HTML. Unaweza kuitumia kuonyesha vizuri sehemu maalumu, kutenganisha vipande vya maandishi au picha, au kufanya design iwe ya kuvutia. CSS hukupa uwezo mkubwa wa kubadilisha muonekano wa border kwa njia nyingi tofauti.

✅ 1. border Property (shorthand)

Hii ni njia fupi ya kuweka border. Unachanganya aina ya mstari, unene, na rangi.

div {
  border: 2px solid green;
}

• 2px = unene

• solid = aina ya mstari

• green = rangi

✅ 2. Aina za Mistari ya Border (border-style)

p {
  border-style: solid;
}

Aina zinazopatikana:

• none – hakuna border

• solid – mstari wa kawaida

• dashed – mstari wa vipande

• dotted – mistari ya nukta

• double – mistari miwili

• groove – mstari unaoonekana kama unaingia ndani

• ridge – mstari unaotoka juu kama reli

• inset – mstari unaoonekana kuingia ndani

• outset – mstari unaoonekana kutoka juu

✅ 3. border-width

Inatumika kudhibiti unene wa border.

p {
  border-width: 5px;
}

Unaweza pia kuweka tofauti kwa kila upande:

p {
  border-width: 1px 2px 3px 4px;
  /* top right bottom left */
}

✅ 4. border-color

Inadhibiti rangi ya border.

p {
  border-color: red;
}

Kama hutaki rangi iwe moja kwa kila upande:

p {
  border-color: red green blue yellow;
}

✅ 5. border kwa Upande Maalumu

Unaweza kuweka border kwa upande mmoja tu:

p {
  border-top: 2px solid red;
  border-right: 2px dashed blue;
}

Properties zinazopatikana:

• border-top

• border-right

• border-bottom

• border-left

✅ 6. Mfano Kamili

.box {
  border: 4px dotted purple;
  padding: 15px;
  margin: 20px;
  background: lavender;
}

<div class="box">
  Sanduku lenye border ya nukta rangi ya zambarau.
</div>

✅ Hitimisho

Katika somo hili, tumejifunza namna mbalimbali za kutumia border kwenye CSS. Umejifunza kuweka mistari tofauti, rangi tofauti, na kudhibiti mipaka ya kila upande wa element. Ujuzi huu ni muhimu kwa kuboresha muundo wa vipengele vya tovuti yako.

? Somo Linalofuata: SOMO LA 12 - Backgrounds katika CSS

Tutajifunza jinsi ya kuweka rangi ya nyuma, picha ya nyuma, jinsi ya kuirudia, kuipanga, na kuimilikisha kwa vipimo sahihi.

? Maswali ya Kujitathmini

1. Ili kuweka mstari wa kawaida wa border, unatumia border-style: ...?
   a) dashed
   b) double
   c) solid
   d) groove

2. border-width: 5px; inafanya nini?
   a) Inadhibiti spacing ya ndani
   b) Inaongeza kivuli
   c) Inaongeza unene wa border
   d) Inaongeza padding

3. Ili kuonyesha border upande wa juu tu, utatumia ipi?
   a) border-up
   b) border-start
   c) border-top
   d) top-border

4. border: 3px dashed blue; inaweka border ya aina gani?
   a) Nukta
   b) Vipande
   c) Imara
   d) Miwili

5. border-color: red green blue yellow; ina maana gani?
   a) Rangi inakuwa random
   b) Hakuna athari
   c) Inatoa error
   d) Kila upande unapata rangi tofauti