Этот генератор border-radius CSS3 позволяет вам быстро настроить радиус границы для элемента HTML с помощью простого редактора и скопировать сгенерированный код CSS прямо в свой проект.

Результат:

.result-border-item {

-webkit-border-radius: ;

border-radius: ;

}
Элемент с классом result-border-item

 

Определение и использование border-radius

Свойство CSS3 border-radius позволяет применять закругленные углы к элементам HTML без использования изображений или других уловок.

Это свойство может иметь от одного до четырех значений. Вот правила:

    1. Четыре значения — border-radius: 20px 50px 50px 20px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу):
    2. Три значения — border-radius: 15px 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углам, а третье значение применяется к нижнему правому углу):
    3. Два значения — border-radius: 30px 50px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углам, а третье значение применяется к нижнему правому углу):
    4. Одно значение — border-radius: 50px; (значение применяется ко всем четырем углам, которые скруглены одинаково: