Как сделать равномерный бордер радиус по контейнеру?
snippet
Подскажите , как сделать равномерное закругление по всему блоку в котором есть вертикальный скролл , просто у краев которые рядом со скролом нету закругления ?
Дополнительно:
есть подозрение что он просто не влезает.
Ответы:
Попробуй вот так, как пример:
<div class="div_item"> <ul class="list__items"> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> </ul> </div> |
<div class="div_item"> <ul class="list__items"> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> <li class="item__block"></li> </ul> </div>
.div_item { width: 236px; height: 188px; overflow-y: scroll; overflow-x: hidden; } .list__items { width: 98%; border-radius: 30px; padding-left: 0; overflow: hidden; } .item__block { width: 100%; height: 34px; background: green; list-style-type: none; } .div_item::-webkit-scrollbar { width: 6px; border-radius: 100px; } .div_item::-webkit-scrollbar-track { background: #E6E6E6; border-radius: 100px; margin: 20px 0; } .div_item::-webkit-scrollbar-thumb { background: #7F7F7F; border-radius: 100px; } .item__block { width: 224px; height: 34px; background: green; list-style-type: none; } .item__block:nth-child(2n) { background: red; } } |
.div_item { width: 236px; height: 188px; overflow-y: scroll; overflow-x: hidden; } .list__items { width: 98%; border-radius: 30px; padding-left: 0; overflow: hidden; } .item__block { width: 100%; height: 34px; background: green; list-style-type: none; } .div_item::-webkit-scrollbar { width: 6px; border-radius: 100px; } .div_item::-webkit-scrollbar-track { background: #E6E6E6; border-radius: 100px; margin: 20px 0; } .div_item::-webkit-scrollbar-thumb { background: #7F7F7F; border-radius: 100px; } .item__block { width: 224px; height: 34px; background: green; list-style-type: none; } .item__block:nth-child(2n) { background: red; } }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания равномерного border-radius по всему контейнеру можно использовать следующий подход:
1. Сначала определите ширину и высоту вашего контейнера. Например, если у вас есть div с классом "container", то можно задать ему ширину и высоту в CSS:
```html
.container {
width: 200px;
height: 100px;
border: 1px solid black;
}
```
2. Далее, задайте border-radius равный половине наименьшего значения из ширины и высоты контейнера. Например, если у вас контейнер с шириной 200px и высотой 100px, то радиус округления должен быть 50px:
```html
.container {
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 50px;
}
```
3. Теперь ваш контейнер будет иметь равномерное округление по всему периметру. Вы можете также изменить значение border-radius в зависимости от ваших предпочтений и дизайна.
4. Важно помнить, что для некоторых браузеров может потребоваться использовать вендорные префиксы для свойства border-radius. Например, для Webkit-браузеров (Chrome, Safari) добавьте следующий код:
```html
.container {
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 50px;
-webkit-border-radius: 50px;
}
```
Таким образом, вы можете легко создать равномерный border-radius по контейнеру, используя CSS.