Бордери, границі, рамки


				border: 2px solid #2e2e2e; - об’єднуючий стиль.


				border-width: 2px; - ширина границі.

				border-style: dashed; - тип границі.

				border-color: #f00; - колір границі.

Типи границь (порівняйте їх вигляд у різних браузерах):


				border-style: solid;


				border-style: dashed;


				border-style: dotted;

Є ще декілька екзотичних стилів бордерів, проте, сьогодні вони майже не використовуються.

Можна задати окремі стилі для кожного з чотирьох бордерів, синтаксис подібний до стилів margin та padding:


				border-width: 4px 2px;

				border-style: dashed soild;

				border-color: #f00 #0f0 #ff0 #f0f;

Можна задавати тільки одну границю: зверху, знизу, зліва чи зправа (або декілька границь, окремо):


				border-left: 1px solid red;

				border-top: 2px solid blue;

				border-right: 20px dashed green;

				border-bottom: 1px dotted yellow;

Ну і 12 стилів для того, щоб задати кожному бордеру один з параметрів:


				border-left-width: 2px;

				border-bottom-color: #aaa;

				border-top-style: solid;

				...

Прибрати границю можна задавши значення none:


				border: none;

				border-bottom: none;

Прозорий бордер для ховер-ефекта (jsFiddle):


				.box { border: 1px solid transparent;}

				.box:hover { border-color: blue;}

За допомогою бордерів можна робити кутики.

Заокруглення країв блока

Заокруглення можна застосовувати навіть якщо у блока не буде бордерів, буде заокруглюватися фон.

Задати радіус скруглення країв можна як для всіх чотирьох кутів одночасно, так і для кожного окремо, подібно як в margin/padding:


				border-radius: 10px;

				border-radius: 10px 20px;

				border-radius: 10px 20px 30px;

				border-radius: 10px 20px 30px 40px;


				// еліпсоподібні скруглення:

				border-radius: 20px/10px;

				border-radius: 10px 20px 30px 40px/20px 10px 50px 5px;

Квадратний елемент можна зробити круглим, задавши радіус скруглення 50%. Прямокутний елемент стане овальним.

Перевага в тому, що вам не треба знати розмір елемента, 50% з любого квадрата зробить круг:


				border-radius: 50%;

Самостійно познайомтеся зі стилем border-image.