Sifa ya border-width
Sifa border-width huweka unene wa
mpaka kwa pande zote kwa wakati mmoja au
kando kwa kila upande. Ni sifa iliyofupishwa
kwa sifa border-left-width,
border-right-width,
border-top-width,
border-bottom-width.
Thamani ya sifa ni vyombo vyovyote
vya ukubwa, isipokuwa asilimia, au maneno muhimu
thin (mpaka wa 2 pikseli),
medium (mpaka wa 4 pikseli) au thick
(mpaka wa 6 pikseli). Thamani chaguomsingi:
medium.
Kisarufi
kichagui {
border-width: thamani 1, 2, 3 au 4;
}
Idadi ya Thamani
Sifa inaweza kuchukua 1, 2,
3 au 4 thamani, zikionyeshwa
kwa nafasi:
| Idadi | Maelezo |
|---|---|
1 |
Aina kwa pande zote kwa wakati mmoja. |
2 |
Thamani ya kwanza kwa juu na chini, ya pili - kwa mpaka wa kushoto na kulia. |
3 |
Thamani ya kwanza kwa juu, ya pili - kwa mpaka wa kushoto na kulia, ya tatu - kwa chini. |
4 |
Thamani ya kwanza kwa mpaka wa juu, ya pili - kwa kulia, ya tatu - kwa chini, ya nne - kwa mpaka wa kushoto. |
Mfano
Tuweke mpaka mwenye unene wa pikseli moja:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke mpaka mwenye unene wa 4 pikseli:
<div id="elem"></div>
#elem {
border-width: 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke unene wa mpaka wa juu na chini
kwa 1px, na wa kulia na kushoto - kwa 4px:
<div id="elem"></div>
#elem {
border-width: 1px 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke unene wa mpaka wa juu kwa 1px,
wa kulia na kushoto - kwa 4px, na wa chini kwa
6px:
<div id="elem"></div>
#elem {
border-width: 1px 4px 6px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke unene wa mpaka wa juu kwa 1px,
wa kulia kwa 4px, wa chini - kwa 6px,
na wa kushoto kwa 8px:
<div id="elem"></div>
#elem {
border-width: 1px 4px 6px 8px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke unene wa mpaka kwa neno muhimu thin:
<div id="elem"></div>
#elem {
border-width: thin;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke unene wa mpaka kwa neno muhimu medium:
<div id="elem"></div>
#elem {
border-width: medium;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke unene wa mpaka kwa neno muhimu thick:
<div id="elem"></div>
#elem {
border-width: thick;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Mfano
Tuweke mpaka tofauti kwa pande tofauti:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Angalia Pia
-
sifa
border-style,
ambayo huweka muonekano wa mpaka -
sifa
border-color,
ambayo huweka rangi ya mpaka -
sifa
border,
ambayo ni sifa iliyofupishwa kwa mpaka