CSSスキル - 第4章 Lesson9

ボックスの角を丸くするborder-radiusの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ボックスの角を丸くするborder-radiusプロパティを利用して、角の丸いボタンを作成する方法を解説しています。



この動画で学べること

・border-radiusで角丸にする方法



border-radiusで角丸にする方法

ボックスの角をまるくするプロパティは、border-radiusuプロパティです。
書き方は「border-radius: 左上 右上 右下 左下;」で、この左上から時計回りに指定することがルールとして決まっています。
では実際に、<a>タグのボタンの角を丸くしていきましょう。




a {
padding: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
border-radius: 10px;
}




border-radiusの値が1つしか書かれていませんが、これは全ての角が10pxなので、省略して書いているという意味です。
では次は上下左右が同じではない場合を見てみましょう。
<div>タグのid名「design」と「event」に対してborder-radiusをかけていきます。



div#design {
width: 460px;
height: auto;
background-color: #fff;
margin: 30px 0 30px 30px;
padding: 20px 20px 20px 20px;
border-right: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
border-left: 1px solid #D1D1D1;
border-top: 3px solid #d86487;
border-radius: 0 0 10px 10px;
}




ブラウザで見ると、長方形の下だけが角丸になったことがわかります。
この書き方であれば、それぞれの角に自分の好きな値を設定することができますね。