Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

Закругление углов блока. Свойство border-radius

border-radius: 10px;

border-radius: 40px 10px;

border-radius: 60px 20px 10px;

border-radius: 40px 40px 0 0;

border-radius: 30px/20px;

border-radius: 60px 20px/10px;

border-radius: 60px 20px/10px 20px;

Исходный код этого примера:

<style>
    .radius {
        width: 400px; /* Ширина блока */
        background: #ccc; /* Цвет фона */
        border: 1px solid #000; /* Ширина, стиль, цвет рамки */
        padding: 15px; /* Поля вокруг текста */
        margin-bottom: 10px; /* Отступ снизу */
    }
</style>
<div style="border-radius: 10px;" class="radius">
    border-radius: 10px;
</div>
<div style="border-radius: 40px 10px" class="radius">
    border-radius: 40px 10px;
</div>
<div style="border-radius: 60px 20px 10px;" class="radius">
    border-radius: 60px 20px 10px;
</div>
<div style="border-radius: 40px 40px 0 0;" class="radius">
    border-radius: 40px 40px 0 0;
</div>
<div style="border-radius: 30px/20px;" class="radius">
    border-radius: 30px/20px;
</div>
<div style="border-radius: 60px 20px/10px;" class="radius">
    border-radius: 60px 20px/10px;
</div>
<div style="border-radius: 60px 20px/10px 20px;" class="radius">
    border-radius: 60px 20px/10px 20px;
</div>

.
Прокомментировать/Отблагодарить