Цель этого руководства — объяснить, как создавать границы закругленных углов. Для этого, во-первых, мы должны знать о « граница ' имущество. Итак, начнем!
Что такое свойство «граница» в CSS?
Чтобы создать рамку вокруг элемента, вам нужно использовать « граница ' имущество. Используя это свойство, вы можете установить « стиль », « цвет ', а также ' ширина » границы.
Синтаксис
Синтаксис свойства границы задается следующим образом:
граница : цвет стиля ширины
Вот описание приведенных выше значений:
- ширина: Он используется для установки ширины границы.
- стиль: Он используется для установки стиля границы, такого как пунктирная, пунктирная, сплошная или двойная.
- цвет: Он определяет цвет границы.
Вот пример, в котором мы реализуем « граница ' имущество.
Как создать границу с помощью CSS?
Чтобы создать границу, сначала добавьте элемент в файл HTML. Для этого мы создадим
и
:
< тело >
< див учебный класс знак равно 'угол' >
< h1 > Линукс подсказка < / h1 >
< п > Скругление углов в CSS < / п >
< / див >
< / тело >
Далее мы перейдем к разделу CSS.
Здесь « .угол ” используется для доступа к классу, назначенному
.угол {
граница : 4 пикселя твердый RGB ( 248 , 6 , 107 ) ;
ширина : 250 пикселей ;
высота : 150 пикселей ;
фоновый цвет : RGB ( 2. 3. 4 , 0 , 255 ) ;
}
После того, как вы внедрили вышеупомянутый код, перейдите к файлу HTML и выполните его. Вы увидите следующий результат:
Теперь мы перейдем к следующей части, где мы создадим квадратную границу для границы круглого угла.
Как скруглить угол с помощью CSS?
Чтобы создать рамку с круглым углом, « радиус границы », в котором вы можете установить радиус угла в соответствии с вашими предпочтениями.
Синтаксис
Синтаксис свойства border-radius приведен ниже:
радиус границы : ценностьДавайте продолжим предыдущий пример и установим радиус границы для получения скругленных углов.
Пример
В ' .угол ' класса файла CSS, установите значение ' радиус границы «собственность как» 30 пикселей ”:
радиус границы : 30 пикселей ;Добавив указанную выше строку, вы получите следующий вывод:
Приведенный выше вывод означает, что границы успешно изменены на круглые углы благодаря свойству border-radius.
Вывод
В CSS ' радиус границы ” используется для изменения угла границ. Форма кривой изменяется в соответствии с заданным значением радиуса. Используя упомянутое свойство, вы можете установить радиус угла по своему выбору. В этой статье мы объяснили, как скруглить границы углов, используя свойство border-radius, на примере.