У цьому розділі ми поговоримо про те, як зробити за допомогою CSS рамку - бордюр, навколо того чи іншого елемента. В HTML це завдання лежала на плечах атрибута border. проте його можна було застосувати далеко не до кожного тегу (елементу) та й не завжди він міг вирішити ту чи іншу дизайнерську задумку.
В CSS це завдання бере на себе однойменне базове властивість border і значно розширює коло можливостей при роботі зі стилем кордону будь-якого (!) Елемента виведеного на екран.
Якщо в HTML бордюр міг бути тільки у вигляді суцільної лінії навколо елемента, то в CSS це вже досить широкий набір можливих стилів рамок.
Властивість border-style може привласнювати елементу один з нижче перерахованих стилів кордону.
- none - межа відсутня (за замовчуванням).
- dotted - межа з ряду точок.
- dashed - пунктирна межа.
- solid - суцільна межа
- double - подвійний кордон
- groove - межа "борозенка"
- ridge - межа "гребінь"
- inset - втиснута межа
- outset - видавлені межа
Стиль бордюру може бути заданий як для всіх сторін елемента одночасно, так і для кожної його боку окремо в залежності від того, скільки значень присвоєно властивості border- style. Таких значень може бути від одного до чотирьох по числу сторін елемента.
У кожному з чотирьох випадків діють свої "правила" з присудження стилю рамки тій чи іншій стороні елемента, які наведені в таблиці нижче: