Web-Programming.in.ua

Пошук

Авторизація

Запам`ятати
Реєстрація

Останні коментарі

Популярні статті

Корисні поосилання

RSS

Заокруглені кути CSS3

05.05.2015 19:58 | Admin

Всім привіт, в цій статті я розкажу Вам, як зробити заокруглені кути в CSS3 через властивість "border-radius".

Зараз створимо просту сторінку з розміткою. Одразу наведу приклад:

<html>
    <head>
        <meta charset="utf-8">
        <style>
            
        </style>
    </head>
    <body>
        <div class="container"></div>
    </body>
</html>

Тепер пропишемо стилі:

.container {
    width: 150px;
    height: 150px;
    background-color: gray;
}

Для того, щоб заокруглити кути використовують всластивість "border-radius". Давайте додамо це до нашої роботи:

border-radius: 15px;

В цьому випадку всі кути будуть заокруглені на 15px.

А як же бути, якщо потрібно заокруглити тільки один кут? Все просто, для цього потрібно перечислити значення для верхнього лівого, верхнього правого, нижнього правого, нижнього лівого кутів.

Приклад:

border-radius: 15px 15px 5px 5px;

Також радіус заокруглання можна задавати і у відсотках:

border-radius: 50%;

В цьому випадку у нас получиться круг.

Переглянути результат уроку можна тут: http://examples.web-programming.in.ua/border-radius_css3

Категорія: CSS | Коментарі відсутні »

Тільки авторизовані користувачі можуть додавати коментарі.

Нагору