Как скруглить углы с помощью CSS

Kak Skruglit Ugly S Pomos U Css



Стилизация — важная часть разработки HTML-сайта, а CSS предоставляет различные стили для HTML-элементов; один из них — создать рамку вокруг любого элемента. В основном он используется для различения разделов с помощью форм границ, таких как сплошная, пунктирная, пунктирная и двойная.

Цель этого руководства — объяснить, как создавать границы закругленных углов. Для этого, во-первых, мы должны знать о « граница ' имущество. Итак, начнем!

Что такое свойство «граница» в CSS?

Чтобы создать рамку вокруг элемента, вам нужно использовать « граница ' имущество. Используя это свойство, вы можете установить « стиль », « цвет ', а также ' ширина » границы.







Синтаксис



Синтаксис свойства границы задается следующим образом:



граница : цвет стиля ширины

Вот описание приведенных выше значений:





  • ширина: Он используется для установки ширины границы.
  • стиль: Он используется для установки стиля границы, такого как пунктирная, пунктирная, сплошная или двойная.
  • цвет: Он определяет цвет границы.

Вот пример, в котором мы реализуем « граница ' имущество.

Как создать границу с помощью CSS?

Чтобы создать границу, сначала добавьте элемент в файл HTML. Для этого мы создадим

и назначим « угол Класс к этому. После этого добавим заголовок и абзац с помощью тегов

и

:



< тело >

< див учебный класс знак равно 'угол' >

< h1 > Линукс подсказка < / h1 >

< п > Скругление углов в CSS < / п >

< / див >

< / тело >

Далее мы перейдем к разделу CSS.

Здесь « .угол ” используется для доступа к классу, назначенному

. После этого мы создадим границу с помощью « граница » и присвойте значения ширины, стиля и цвета как « 4 пикселя », « твердый ', а также ' RGB(248, 6, 107) ', соответственно. Кроме того, мы добавим ширину « 250 пикселей ', высота ' 150 пикселей ', и цвет фона ' RGB(234, 0, 255) » для div:



.угол {

граница : 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, на примере.