【CSS入門】ボタンやボックスの左右の両角だけ丸くする方法〜楕円形にならないように両端だけ丸める〜

よくある見かけるこの形をCSS作る方法について解説していきます！

border-radiusというCSSメソッドを使うのですが、設定する数値の意味を理解していないと出来ない形でもあるのです。

楕円系のように上下左右全体が丸みを帯びた形になることなく、両端だけ丸める方法です！

完成形！

こんな形です！！↓

コード

<div class="sample">サンプル</div>

.sample{
	width:85%;
	height:80px;
	border-radius:40px;/*heightの1/2を指定*/
    text-align:center;
	background:orange;
	color:white;
}

簡単な解説

何気なく使っているborder-radius:◯px;というのは、細分化すると次のようになります。

border-radius:40px;

 ||

border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
 border-bottom-left-radius: 40px;

よって、上下左右の４つ角に半径1/2高さの円をborder-radiusで指定すれば、両端だけ丸まった形になるわけです。