Как пофиксить вылезающий border у элемента в родителе с закруглеными углами?
Ссылка скопирована
Есть блок в котором закруглены края и в нем элементы у которых снизу border. При прокрутке border вылезает за края в месте скругления.
Как можно это пофиксить?
Дополнительно:
overflow: hidden?
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Елена Вебер
Ответ
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
Веб-разработка
Какие особенности разработки сайтов под тор/даркнет?
1 ответ
Веб-разработка
Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)?
2 ответов
Android
Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)?
1 ответ
Google
Как подтвердить аккаунт Google?
1 ответ
Чтобы исправить проблему с вылезающим border у элемента в родителе с закругленными углами, можно использовать следующий подход:
1. Добавить свойство `overflow: hidden;` к родительскому элементу. Это позволит обрезать вылезающие грани дочернего элемента.
2. Установить `border-radius` на дочерний элемент, соответствующий закругленным углам родителя. Например:
```html
```
```css
.parent {
border-radius: 10px;
overflow: hidden;
}
.child {
border: 1px solid red;
border-radius: 10px;
padding: 10px;
}
```
3. При необходимости, можно также установить `box-sizing: border-box;` для дочернего элемента, чтобы ширина и высота элемента включали в себя границу и padding:
```css
.child {
border-box: border-box;
}
```
Следуя этим шагам, можно исправить проблему с вылезающим border у элемента в родителе с закругленными углами.