ボーダーと角丸

Coddyの「CSSプロジェクト - おしゃれなボタン」コースのレッスン 5/8。

HTMLのbutton要素にはデフォルトでボーダーが設定されています。カスタマイズしてみましょう！

角を丸くするには、border-radiusプロパティを使用します（paddingやmarginと同じ形式の値を使用します）。例えば、

#rounded {
	border-radius: 8px;
}

ボーダーを完全に削除するには、次のように上書きします。

#no-border {
	border: none;
}

ヒント：border-radiusに大きな値を設定すると、円形になります！

チャレンジ

簡単

タスク:

border radius を 0 より大きい値に変更してください
border をデフォルトとは異なるものに変更してください

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

CSSプロジェクト - おしゃれなボタンのすべてのレッスン

1はじめに

2CSSプロジェクト

ボーダーと角丸