Равномерный бордер радиус по контейнеру

Question

Подскажите , как сделать равномерное закругление по всему блоку в котором есть вертикальный скролл , просто у краев которые рядом со скролом нету закругления ?

.list__items {
         width: 236px;
         height: 188px;
         border-radius: 30px;
         overflow-y: scroll;
         list-style: none;
         margin-left: 0;
         padding-left: 0;
}
         .list__items::-webkit-scrollbar {
            width: 6px;
            border-radius: 100px;
         } 
         .list__items::-webkit-scrollbar-track {
            background: #E6E6E6;
            border-radius: 100px;
            margin: 20px 0;
         } 
         .list__items::-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;
            }
         }

  <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>

Answer 1

Насколько принципиально важен размер .list__items? И какой должен быть радиус скругления? Могу предложить такие варианты:

.list__items {
  width: 230px;
  height: 188px;
  overflow-y: scroll;
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  border-radius: 50px;
}

.list__items::-webkit-scrollbar {
  width: 6px;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-track {
  background: #E6E6E6;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-thumb {
  background: #7F7F7F;
  border-radius: 6px;
}

.item__block:nth-child(odd) {
  width: 224px;
  height: 34px;
  background: green;
}

.item__block:nth-child(even) {
  width: 224px;
  height: 34px;
  background: red;
}

<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>

.list__items {
  width: 230px;
  height: 188px;
  overflow-y: scroll;
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  border-radius: 60px;
}

.list__items::-webkit-scrollbar {
  width: 6px;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-track {
  background: #E6E6E6;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-thumb {
  background: #7F7F7F;
  border-radius: 6px;
}

.item__block:nth-child(odd) {
  width: 224px;
  height: 34px;
  background: green;
}

.item__block:nth-child(even) {
  width: 224px;
  height: 34px;
  background: red;
}

<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>

.list__items {
  width: 230px;
  height: 188px;
  overflow-y: scroll;
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  border-radius: 80px;
}

.list__items::-webkit-scrollbar {
  width: 6px;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-track {
  background: #E6E6E6;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-thumb {
  background: #7F7F7F;
  border-radius: 6px;
}

.item__block:nth-child(odd) {
  width: 224px;
  height: 34px;
  background: green;
}

.item__block:nth-child(even) {
  width: 224px;
  height: 34px;
  background: red;
}

<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>

.list__items {
  width: 230px;
  height: 188px;
  overflow-y: scroll;
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  border-radius: 115px;
}

.list__items::-webkit-scrollbar {
  width: 6px;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-track {
  background: #E6E6E6;
  border-radius: 6px;
}

.list__items::-webkit-scrollbar-thumb {
  background: #7F7F7F;
  border-radius: 6px;
}

.item__block:nth-child(odd) {
  width: 224px;
  height: 34px;
  background: green;
}

.item__block:nth-child(even) {
  width: 224px;
  height: 34px;
  background: red;
}

<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>

Не идеально, конечно, но всё же

БЛОГ НА HUSL

Равномерный бордер радиус по контейнеру

Ответы (1 шт):