CSS kənarlıq (border) xüsusiyyətləri

Kənarlıq (border), mətn sahəsi və padding ətrafındakı bir və ya daha çox xəttə deyilir.
 

 

CSS kənarlıq (border) xüsusiyyətləri

 
border-style
border-top-style, border-right-style, border-bottom-style, border-left-style
border-width
border-top-width, border-right-width, border-bottom-width, border-left-width
border-color
border-top-color, border-right-color, border-bottom-color, border-left-color
border

Yuxarıdakıları növbə ilə araşdıraq.
 
border-style
Quruluşu: border-style: <dəyər>
Aldığı dəyərlər: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
border-style xüsusiyyəti kənarlıq stilini təyin etmək üçündür. (Məs: dotted (nöqtəli), double (cüt) və s.) 10 fərqli dəyəri CSS dəstəkləməkdədir. Bir və ya dörd dəyər ala bilər, əgər dörd dəyər alırsa növbəylə üst, sağ, alt və sol kənarlıq stilini təyin edir. Əgər tək dəyəri varsa bütün kənarlıq dəyəri təyin edilmiş deməkdir. Əgər iki və ya üç dəyər varsa, öncəki dərslərimizdə margin-də gördüyümüz sıralama bura da aiddir.
p.yeni {
border-style: solid;
}
 
border-top-style, border-right-style, border-bottom-style, border-left-style
Quruluşu: border-[top,left,right,bottom]-style: <dəyər>
Aldığı dəyərlər: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
border-top-style, border-right-style, border-bottom-style, border-left-style border-style xüsusiyyətinin hər kənara ayrı-ayrı təyin edilməsi üçün istifadə edilir.
h1 {
border-style: solid;
border-left-style: none;
}
 
border-width
Quruluşu: border-width: <dəyər>
Aldığı dəyərlər: [ thin | medium | thick | <uzunluq dəyəri> ]{1,4} | inherit
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
İlk olaraq stili təyin etdikdən sonra kənarlıq qalınlığını təyin etmək üçün border-width dəyəri istifadə edilir.

border-width faiz dəyəri ala bilməz.
p {
margin: 5px;
background-color: silver;
border-style: solid;
border-width: 1px;
}
 
border-top-width, border-right-width, border-bottom-width, border-left-width
Quruluşu: border-[top,left,right,bottom]-width: <dəyər>
Aldığı dəyərlər: thin | medium | thick | <uzunluq dəyəri > | inherit
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
border-top-width, border-right-width, border-bottom-width, border-left-width border-width xüsusiyyətinin hər kənara ayrı-ayrı təyin edilməsi üçün istifadə olunur
h2 {
border-left-width: medium;
border-style: solid;
}
 
border-color
Quruluşu: border-color: <dəyər>
Aldığı dəyərlər: [ <rəng> | transparent ]{1,4} | inherit
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
border-color xüsusiyyəti kənarlıq rəngini təyin edir.
p {
border-style: solid;
border-color: gray;
}
 
border-top-color, border-right-color, border-bottom-color, border-left-color
Quruluşu: border-[top,left,right,bottom]-color: <dəyər>
Aldığı dəyərlər: [ <rəng> | transparent ]{1,4} | inherit
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
Bu xüsusiyyətlər border-color xüsusiyyətinin hər kənara ayrı-ayrı təyin edilməsi üçün istifadə olunur
p {
border-style: dotted;
border-top-color: black;
}
 
border
Quruluşu: border: <dəyər>
Aldığı dəyərlər: <border-width> | <border-style> | <rəng>
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
border yuxarıda sadaladığımız xüsusiyyətləri eyni anda təyin etmək üçün istifadə edilir. Yəni qısaltmadır.
h1 {
border: thick silver solid;
}
Bu xüsusiyyətləri bir-bir təyin etmək istəsəydik belə bir kod yazmaq lazım olacaqdı:
h1 {
border-top: thick silver solid;
border-bottom: thick silver solid;
border-right: thick silver solid;
border-left: thick silver solid;
}
CSS3