стиль Межі
Властивість border-style вказує, який тип кордону відображати.
Ніяке з властивостей кордону не матиме БУДЬ-ЯКОЇ ефект доти, поки властивість border-style не встановлено!
Значення border-style
none: Відсутність кордону
dotted: Кордон з точок
dashed: Пунктирна межа
solid: Хмарно межа
double: Подвійна межа. Ширина подвійної кордону дорівнює значенню border-width
groove: Визначає 3D рельєфну кордон. Ефект залежить від значення border-color
ridge: Визначає 3D хребтообразний кордон. Ефект залежить від значення border-color
inset: Визначає 3D вдавлену кордон. Ефект залежить від значення border-color
outset: Визначає 3D опуклу кордон. Ефект залежить від значення border-color
Ширина Межі
Властивість border-width використовується, щоб встановити ширину кордону.
Ширина встановлюється в пікселях, або за допомогою одного з трьох зумовлених значень: thin (тонка), medium (середня), or thick (товста).
Зауваження: Властивість "border-width" не працює, якщо використовується в поодинці. Використовуйте спочатку властивість "border-style", щоб встановити межі.
Спробуйте самі »
Клацніть на кнопці "Спробуйте самі" щоб побачити як це працює
колір Межі
Властивість border-color використовується, щоб встановити колір кордону. Колір може бути встановлений за допомогою:
- назви - вкажіть назву кольору, наприклад "red"
- RGB - вкажіть RGB значення, наприклад "rgb (255,0,0)"
- Hex - вкажіть шістнадцяткове значення, наприклад "# ff0000"
Також ви можете встановити колір кордону в "transparent".
Зауваження: Властивість "border-color" не працює, якщо використовується в поодинці. Вкажіть спочатку властивість "border-style", щоб встановити межі.
Спробуйте самі »
Клацніть на кнопці "Спробуйте самі" щоб побачити як це працює
Кордон - Індивідуальне оформлення сторін
У 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;
- верхня межа - з точок
- права межа - суцільна
- нижня межа - подвійна
- ліва межа - пунктирна
- border-style: dotted solid double;
- верхня межа - з точок
- права і ліва кордону - суцільні
- нижня межа - подвійна
- border-style: dotted solid;
- верхня і нижня межі - з точок
- права і ліва кордону - суцільні
- border-style: dotted;
- всі чотири кордони - з точок
Властивість border-style використовується в прикладі вище. Однак, це також працює і з властивостями border-width і border-color.
Кордон - стенографічний (скорочена) властивість
Як ви можете бачити в прикладах вище, для кордонів є досить багато властивостей.
Щоб вкоротити код, можна вказати всі властивості кордону в одну властивість. Воно називається стенографічним (або скороченим) властивістю.
Стенографічне властивість для властивостей кордону - "border":
border: 5px solid red;
Спробуйте самі »
Клацніть на кнопці "Спробуйте самі" щоб побачити як це працює
При використанні властивості border, порядок значень такий:
Можна припустити деякі значення (хоча, властивість border-style все-таки необхідно), головне - зберігати вказаний порядок.
ще приклади
Установка стилю нижньої межі
Цей приклад демонструє, як встановити стиль нижньої межі.
Установка ширини лівої межі
Цей приклад демонструє, як встановити ширину лівої межі.
Установка кольору чотирьох кордонів
Цей приклад демонструє, як встановити колір чотирьох кордонів. Вони можуть мати від одного до чотирьох кольорів.
Установка кольору правої межі
Цей приклад демонструє, як встановити колір правої межі.