Властивість border style в CSS або як зробити свій сайт привабливіше

Об’єднання властивостей

Варто звернути увагу, що властивості кордонів можна поєднувати між собою, використовуючи фігурні дужки. Для цього в них потрібно по черзі написати всі значення властивостей, які ви хочете задати для border style в CSS. Враховуйте, що якщо ви пропустили якісь властивості і не вказали їх, то вони задаються системою за замовчуванням.

CSS: до table border style

Особливу увагу варто приділити такому тегу, як table, який допомагає створювати таблиці на веб-сторінках. Для того, щоб застосувати всі вищезгадані властивості до клітинок таблиці, а саме до їх кордонів, буде потрібно спеціальне властивість border-collapse. Для чого ж необхідно окреме властивість, що застосовується виключно до таблиць? Все набагато простіше, ніж здається на перший погляд. Якщо в таблиці для кожної клітинки створювати окремий контур, виникають два вагомі недоліки:

  • Якщо клітинок у таблиці багато, то це займе багато часу та значно збільшиться вага коду;
  • При оформленні кожної комірки окремо кордони сусідніх комірок будуть накладатися один на одного, що також збільшує вагу коду, а також може виглядати не дуже привабливо.

Таким чином, collapse допомагає, висловлюючись простою мовою, “склеювати” спільні кордони. Які значення може приймати це властивість в таблицях? Можливі варіанти подані нижче:

  • collapse – між осередками розташована одна лінія. Осередки “склеєні”;
  • separate – кожна клітинка формує навколо себе деяку межу, що відокремлює її від інших осередків;
  • inherit – при застосуванні даного атрибуту значення успадковується від попередніх.