Для того чтобы растянуть border-radius во всю высоту и ширину с отступами от экрана, вам потребуется использовать CSS свойства border-radius, width, height, padding и box-sizing, а также задать элементу позиционирование.
Первым шагом вам нужно создать блочный элемент, который будет содержать контент и иметь заданные отступы от экрана. Например, вы можете использовать <div> элемент для этой цели:
<div class="container"> <!-- Ваш контент здесь --> </div>
Далее необходимо применить стили к этому элементу. В CSS вы можете использовать следующие правила:
.container {
position: absolute; /* Задаем позиционирование для элемента */
top: 50%; /* Размещаем его по вертикали на 50% экрана */
left: 50%; /* Размещаем его по горизонтали на 50% экрана */
transform: translate(-50%, -50%); /* Центрируем элемент относительно его собственных размеров */
width: 80%; /* Устанавливаем ширину элемента в 80% от ширины окна браузера */
height: 80%; /* Устанавливаем высоту элемента в 80% от высоты окна браузера */
padding: 20px; /* Создаем отступы внутри элемента */
box-sizing: border-box; /* Указываем, что размеры элемента включают границы и отступы */
background-color: #f0f0f0; /* Задаем цвет фона элемента */
border-radius: 10px; /* Устанавливаем значение border-radius */
}
В результате применения этих стилей, элемент .container будет помещен в центр экрана с отступом от него и иметь заданные размеры и border-radius. Важно отметить, что свойство box-sizing с значением border-box позволяет учитывать границы и отступы элемента при расчете его размеров, обеспечивая таким образом то, что элемент не выйдет за границу экрана.
Надеюсь, эта информация будет полезна для вас при решении данной задачи! Если у вас возникнут еще вопросы - не стесняйтесь задавать их.