border-radiusの一部のみ角を丸くする

プログラミングの勉強日記

2020年7月1日　Progate Lv.148
ポートフォリオ作成中
border-radiusを使うと4つ角すべて丸くなってしまう。
1つの角のみを丸くしたい。

目標物

　1つの要素（左側のところ）は左の上下の角を、もう1つの要素（右側のところ）は右の上下部分の角を丸くさせたい。

一部の角を丸くする方法

　border-radiusの間に上下左右を指定すれば、その部分の角を丸くすることができる。

左上のみ丸くする場合

border-top-left-radius: 10px;

左下のみ丸くする場合

border-bottom-left-radius: 10px;

右上のみ丸くする場合

border-top-right-radius: 10px;

右下のみ丸くする場合

border-bottom-right-radius: 10px;

サンプルコード

HTMLファイル

<div class="profile">
  <div class="contentLeft">
    ...
  </div>
  <div class="contentRight">
    ...
  </div>
</div>

CSSファイル

.contentLeft{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.contentRight{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}