scrollbarの位置を調整したい

Question

			<section id="news">
				<div class="contents_title_img">
					<img src="images/news_title.png" alt="おしらせ">
				</div>
				<div class="contents">
					<p class="sp_date">2019.04.06</p>
					<p>お知らせ内容</p>
					<p class="sp_date">2019.04.07</p>
					<p>お知らせ内容</p>
					<p class="sp_date">2019.04.08</p>
					<p>お知らせ内容</p>
					<p class="sp_date">2019.04.09</p>
					<p>お知らせ内容</p>
				</div>
			</section>

	section#news div.contents{
		margin: 5px 0 0;
		width: 695px;
		height: 136px;
		padding: 0 ;
		border-radius: 15px;
		overflow-y: scroll;
	}
	
	main section#news div.contents p{
		padding-left: 10px;
	}
	
	main section#news div.contents p.sp_date{
		padding-top: 10px;
	}

スクロールバーを付ける要素の枠を角丸にしている為、スクロールバーが右端にあると角丸が隠れてしまいます。
paddingを付けてみましたが、スクロールバーを含まない状態で付加されるので、スクロールバーに影響はありませんでした。
少しだけ左に移動させて角丸にかぶらないようにしたいのですが、そもそも、その是非や、方法をご存知の方いらっしゃいましたら、教えて頂けるとありがたいです。

Answer 1

シェイプ関数の inset() で 丸みをつけて切り取ることができます。

    .contents {
        clip-path: inset(0 round 15px);
    }

https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
https://developer.mozilla.org/ja/docs/Web/CSS/basic-shape#Shape_functions

Comments

[y_shigoto]

ご回答ありがとうございます。
このようなプロパティがあるのですね！
検証させて頂き、確かにスクロールの角が角丸の形に切り抜かれたのですが、borderの上にスクロールバーが乗っている状態になり、理想に近い外見が別の方のご回答でしたので、恐縮ながら今回はベストアンサーは見送らせて頂きました。
ただ、とても今後の参考になるご回答であり、記事も併せて送って頂き本当にありがとうございました。使いこなせるように理解を深めたいと思います。

Answer 2

「border-radius」と「scroll」を、divで分けてみてはどうですか？

<div class="border-radius">
  <div class="contents">
    <p class="sp_date">2019.04.06</p>
    <p>お知らせ内容</p>
    <p class="sp_date">2019.04.07</p>
    <p>お知らせ内容</p>
    <p class="sp_date">2019.04.08</p>
    <p>お知らせ内容</p>
    <p class="sp_date">2019.04.09</p>
    <p>お知らせ内容</p>
  </div>
</div>

.border-radius {
  margin: 5px 0 0;
  width: 695px;
  height: 136px;
  padding: 0 ;
  border-radius: 15px;
  overflow: hidden;
  background-color: silver; /* ← 分かりやすく色をつけています */
}

.contents{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

Comments

[y_shigoto]

ご回答下さりありがとうございます！お返事が遅くなり大変申し訳ありませんでした。
別件で立て込んでおり、検証出来ずにおりました。
検証させて頂き、無事解決出来ました！
正に「発想の転換」であり、とても今後の参考になりました。
可能な限り迅速なリアクションを心掛けておりますので、たまに今回のように遅れてしまうこともありますが、再びご縁がございましたら懲りずにお手隙の際で構いませんのでご教授頂ければ幸いです。

[yoshinavi]

解決されて何よりです。
(^^)