Для створення рамки навколо блоку використовується стильова властивість border, як значення якого задається товщина, стиль і колір лінії. Якщо поверх такої лінії накласти графічні куточки, ми вб'ємо двох зайців — отримаємо потрібні закруглення і збережемо кордон, який можна побачити навіть при відключенні картинок.
Для заокруглення куточків у елементів CSS3 призначено властивість border-radius, значенням якого виступає радіус заокруглення. Якщо взяти квадратне зображення і додати до нього цю властивість, ми отримаємо вже не квадратне, а кругле зображення. Як значення слід задати половину ширини малюнка.
За допомогою border-radius можна зробити не лише кружок, а й еліпс, а також еліптичне заокруглення біля блоку. Для цього треба написати не одне значення, а два через слеш. Запис 20px/10px означає, що по горизонталі радіус заокруглення буде 20 пікселів, а по вертикалі 10 пікселів.Похожі