CSS Сторони межі
CSS Border - Окремі сторони
Із прикладів на попередніх сторінках ви побачили, що можна вказати різні межі для кожної сторони.
В CSS також є властивості для вказування кожної із меж (верхньої, правої, нижньої і лівої):
Приклад
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Результат:
Різні стилі межі
Приклад вище дає той самий результат, що і цей:
Ось як це працює:
Якщо властивість border-style має чотири значення:
- border-style: dotted solid double dashed;
- верхня межа dotted
- права межа solid
- нижня межа double
- ліва межа dashed
Якщо властивість border-style має три значення:
- border-style: dotted solid double;
- верхня межа dotted
- права і ліва межі solid
- нижня межа double
Якщо властивість border-style має два значення:
- border-style: dotted solid;
- верхня і нижня межі dotted
- права і ліва межі solid
Якщо властивість border-style має одне значення:
- border-style: dotted;
- всі чотири межі dotted
Приклад
/* чотири значення */
p {
border-style: dotted solid double dashed;
}
/* три значення */
p {
border-style: dotted solid double;
}
/* два значення */
p {
border-style: dotted solid;
}
/* одне значення */
p {
border-style: dotted;
}
Спробуйте самі »
В наведеному вище прикладі використовується властивість border-style. Однак вона також працює з border-width та border-color.
