8.1 Властивість border
Рамки — важливий аспект веб-дизайну. Вони дозволяють виділяти елементи та покращувати візуальне сприйняття сторінки. CSS надає багато властивостей для створення та стилізації рамок. Розглянемо основні властивості рамок, включаючи компактний і повний запис, а також властивості для завдання ширини, стилю, кольору та заокруглених кутів рамок.
Основні параметри
Основні параметри рамки можна задавати за допомогою окремих властивостей: border-width, border-style та border-color.
Синтаксис:
element {
border-width: width;
border-style: style;
border-color: color;
}
Приклад використання:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Компактний запис
Властивість border дозволяє задати всі основні параметри рамки (ширину, стиль і колір) в одному рядку.
Синтаксис:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Компактний запис</div>
<div class="border-full">Повний запис</div>
</body>
8.2 Ширина рамки: border-width
Властивість border-width задає ширину рамки. Значення можна задати у пікселях (px), точках (pt), відсотках (%) або ключовими словами (thin, medium, thick).
Синтаксис:
element {
border-width: width;
}
Приклад:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Тонка рамка</div>
<div class="border-medium">Середня рамка</div>
<div class="border-thick">Товста рамка</div>
<div class="border-custom">Рамка шириною 5px</div>
</body>
8.3 Стиль рамки: border-style
Опис:
Властивість border-style задає стиль рамки. Варіанти стилів включають:
none: без рамкиsolid: суцільна лініяdotted: пунктирна лініяdashed: штрихова лініяdouble: подвійна лініяgroove: рамка у вигляді канавкиridge: рамка у вигляді гребеняinset: втоплена рамкаoutset: випукла рамка
Синтаксис:
element {
border-style: style;
}
Приклад:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Без рамки</div>
<div class="border-solid">Суцільна лінія</div>
<div class="border-dotted">Пунктирна лінія</div>
<div class="border-dashed">Штрихова лінія</div>
<div class="border-double">Подвійна лінія</div>
<div class="border-groove">Канавка</div>
<div class="border-ridge">Гребінь</div>
<div class="border-inset">Втоплена рамка</div>
<div class="border-outset">Випукла рамка</div>
</body>
8.4 Колір рамки: border-color
Властивість border-color задає колір рамки. Колір може бути вказаний у різних форматах: назви кольорів, шістнадцяткові коди, RGB, RGBA, HSL, HSLA.
Синтаксис:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Червона рамка</div>
<div class="border-blue">Синя рамка</div>
<div class="border-green">Зелена рамка</div>
<div class="border-rgba">Напівпрозора червона рамка</div>
</body>
8.5 Закруглені кути з border-radius
Властивість border-radius дозволяє округляти кути елементів, створюючи закруглені рамки. Воно може застосовуватися до всіх чотирьох кутів одночасно або до кожного кута окремо.
Синтаксис:
element {
border-radius: radius;
}
Значення:
- Єдине значення: наприклад,
border-radius: 10px;— задає однаковий радіус закруглення для всіх кутів - Два значення: наприклад,
border-radius: 10px 20px;— перше значення для верхніх лівих і нижніх правих кутів, друге — для верхніх правих і нижніх лівих кутів - Чотири значення: наприклад,
border-radius: 10px 20px 30px 40px;— задає радіуси для верхнього лівого, верхнього правого, нижнього правого та нижнього лівого кутів відповідно - Змішані значення: радіуси можна задавати у відсотках, що дозволяє адаптувати закруглення під розміри елемента
Приклад:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Закруглення всіх кутів</div>
<div class="radius-top">Закруглення верхніх кутів</div>
<div class="radius-bottom">Закруглення нижніх кутів</div>
<div class="radius-mixed">Змішане закруглення кутів</div>
</body>
.radius-all: застосовує однаковий радіус закруглення (15px) до всіх кутів.radius-top: застосовує закруглення (20px) тільки до верхніх кутів.radius-bottom: застосовує закруглення (25px) тільки до нижніх кутів.radius-mixed: застосовує різні значення радіусу до кожного кута
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ