Чтобы создать равномерные скругленные углы у всего контейнера, в CSS вы можете использовать свойство `border-radius`. Это свойство применяется к элементу, и вы можете задать единое значение для всех углов, что обеспечит равномерное скругление по всему контейнеру.
Пример CSS:
```css
.container {
border-radius: 10px; /* Задает равномерное скругление углов на 10px */
}
```
HTML:
```html
<div class="container">
<!-- Содержимое контейнера -->
</div>
```
Если вы хотите исключить скругление у краев рядом со скроллом, то можно воспользоваться двумя подходами:
1. Создать внутренний контейнер с `overflow: scroll` и закруглением, и внешний контейнер без закругления:
```html
<div class="outer-container">
<div class="inner-container">
<!-- Содержимое с прокруткой -->
</div>
</div>
```
```css
.outer-container {
/* Здесь нет border-radius, так что края не закруглены */
overflow: hidden; /* Обрезать выходящее за пределы содержимое */
}
.inner-container {
border-radius: 10px; /* Закругленные углы */
overflow: scroll; /* Добавить скроллбар если нужно */
}
```
2. Использовать псевдоэлементы для создания закругления:
```html
<div class="scroll-container">
<!-- Содержимое с прокруткой -->
</div>
```
```css
.scroll-container {
overflow: scroll;
position: relative;
}
.scroll-container::before,
.scroll-container::after {
content: "";
position: absolute;
background: white; /* Или цвет фона страницы/контейнера */
z-index: 10;
}
.scroll-container::before {
top: 0;
right: 0;
bottom: 0;
width: 10px; /* Ширина полосы прокрутки */
}
.scroll-container::after {
top: 0;
left: 0;
right: 0;
height: 10px; /* Высота полосы прокрутки */
}
/* Добавим закругление к .scroll-container но исключим .scroll-container::before и .scroll-container::after */
.scroll-container {
border-radius: 10px;
}
```
Используя псевдоэлементы ::before и ::after, мы добавляем блоки, которые будут накладываться на углы области прокрутки, таким образом "скрывая" закругление в этих местах. Важно учитывать, что цвет фона псевдоэлементов должен совпадать с цветом фона контейнера или страницы, чтобы эффект был незаметен.