picha

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

Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.

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;
}

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

p {
  border-style: solid;
}

Aina zinazopatikana:


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

Ingia sasa ili uweze kusoma makala hii yote.

Zoezi la Maswali

help_outlineZoezi la Maswali

info Jaza maswali yote au baadhi kisha bofya kitufe cha kutuma majibu hapo chini.
1 Ili kuonyesha border upande wa juu tu, utatumia ipi?
2 Border-color: red green blue yellow; ina maana gani?
3 Border: 3px dashed blue; inaweka border ya aina gani?
4 Border-width: 5px; inafanya nini?
5 Ili kuweka mstari wa kawaida wa border, unatumia border-style: ...?

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2025-06-23 18:14:17 Topic: CSS Main: Masomo File: Download PDF Views 856

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Simulizi za Hadithi Audio     👉2 Madrasa kiganjani     👉3 web hosting     👉4 kitabu cha Simulizi     👉5 Tafasiri ya Riyadh Swalihina     👉6 Dua za Mitume na Manabii    

Post zinazofanana:

CSS - SOMO LA 27: Kutumia @import Katika CSS

Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.

Soma Zaidi...
CSS - SOMO LA 22: CSS Transition na Animation

Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.

Soma Zaidi...
CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)

Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.

Soma Zaidi...
CSS - SOMO LA 18: Grid Layout

Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.

Soma Zaidi...
CSS - somo la 34: if() Condition katika CSS

Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.

Soma Zaidi...
CSS - SOMO LA 16: Flexbox Basics

Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.

Soma Zaidi...