Скруглённые границы CSS
Свойство border-radius добавляет элементу скруглённые углы. Чем больше значение, тем более скруглены углы.
Пример
border-radius 5px скругляет углы абзаца с границей.
Prompt
HTML-страница, которая придаёт элементу скруглённые углы.
Во внутреннем блоке
<style> задайте абзацу сплошную красную границу 2px и border-radius 5px. Добавьте абзац, чтобы показать скруглённые углы.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border: 2px solid red;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Round border</p>
</body>
</html>
Все свойства границы CSS
Сводка свойств границы:
border— все свойства границы в одном объявлении.border-bottom,border-left,border-right,border-top— все свойства для одной стороны в одном объявлении.border-color,border-style,border-width— цвет, стиль и ширина всех четырёх границ.border-bottom-color,border-bottom-style,border-bottom-width— цвет, стиль и ширина нижней границы (и та же схема дляtop,leftиright).border-radius— задаёт четыре радиуса углов для скругления.