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...