スクロールバーのデザインについて

Question

スクロールバーのデザインについてです。

上記のような、スクロールのthumb部分がまん丸になるように調整することは可能なのでしょうか？
スクロールバー部分は、track部分とthumbに少し隙間もあります。

htmlは5件の日付・テキストがある想定です。
後々、wordpressで上の3件のみ表示させるようにするため、スクロールバーを表示させるのですが、デザインを添付画像にしたいです。

<div class="news">
<ul>
  <li>
    <dl>
      <dt>2021.10.04</dt>
      <dd>samplesamplesamplesamplesamplesample</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2021.10.04</dt>
      <dd>samplesamplesamplesamplesamplesample</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2021.10.04</dt>
      <dd>samplesamplesamplesamplesamplesample</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2021.10.04</dt>
      <dd>samplesamplesamplesamplesamplesample</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>2021.10.04</dt>
      <dd>samplesamplesamplesamplesamplesample</dd>
    </dl>
  </li>
</ul>
</div>

* {
    margin: 0;
    padding: 0;
}
.news {
    width: 800px;
    margin: 25px auto 0;
    height: 100px;
    overflow-y: scroll;
}
.news ul li {
    list-style: none;
}
.news ul li dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 95%;
    margin: 0 auto 10px;
}
.news ul li dl dt {
    width: 28%;
}
.news ul li dl dd {
    width: 70%;
}
::-webkit-scrollbar {
background: #ccc;
border-radius: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
width: 12px;
padding: 0 2px;
}
::-webkit-scrollbar-thumb {
background: #545555;
border-radius: 10px;
width: 10px;
height: 10px!important;
border: 2px solid #ccc;
}

thumbにheightを指定したり、trackにpaddingを指定したのですが、うまくいきませんでした。。。

お分かりの方、お忙しい中恐縮ですが、どうぞよろしくお願いいたします。

Comments

[m.ts10806]

試したコードを提示してください。

[sii_mama]

::-webkit-scrollbar {
background: #ccc;
border-radius: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
width: 12px;
padding: 0 2px;
}
::-webkit-scrollbar-thumb {
background: #545555;
border-radius: 10px;
width: 10px;
height: 10px!important;
}

失礼しました、↑こちらです。

[umau]

1、trackに背景色を付ける
2、thumbのborder-topとborder-bottomに同色のボーダーを付ける(trackの背景色に溶け込ませる)
3、Javascriptでwindowのresizeとscrollにイベント付けて、スクロールとサイズ変更に合わせてボーダーの高さと位置を計算して変更する

という面倒くさい方法を思いつきましたが、角丸が失われるので、まん丸はムリと思って諦めました。案だけ共有。

[sii_mama]

ありがとうございます！
2で余白については解消できました！

やはりthumbのまん丸は難しいですよね。。。
でも助かりました！ありがとうございました！！

[m.ts10806]

質問は編集できます。現状を更新してください。

[sii_mama]

遅くなって申し訳ございません！
ご指摘ありがとうございます。
慣れないもので、何度も申し訳ございません。。。
質問について、修正しておりますので、もしよろしければ再度ご確認いただけますでしょうか。。。！