演習課題「ボックスの角を丸くしよう」
現在、ブラウザでは、角丸ボックスの練習と書かれたオレンジ色のボックスが表示されています。
ここで、border-radiusプロパティを用いてこのボックスを半径15pxの角丸にしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃06:ボックスボーダーの角を丸くする(border-radius)
このチャプターでは、ボックスボーダーの角を丸くする方法を学習します。
border-radiusプロパティを使うことで、ボックスのボーダーの外側の角を丸くすることができます。border-radiusプロパティの値には、角丸の半径となる長さをpx単位だけではなく、%やem、ビューポートとの比率で指定する事ができます。
@charset "UTF-8";
h1 {
padding: 20px;
border-radius: 20px;
background-color: yellow;
}