ボタンや画像などの角を丸くする方法を紹介します。

どのくらいの丸さにするかも簡単に調整することができます。

SPONSORED LINK

HTML/CSSの記述

例としてdiv要素を以下のように記述します。

HTML

<div class="radius">Title</div>
CSS

.radius {
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
}

border-radiusのプロパティを設定することで角を丸くすることができます。

サンプルでは左上、右上、左下、右下の丸さを全て指定していますが、

「border-radius:6px;」と記述することで全ての角を同じ値で丸くすることができます。

サンプル
border-radius: 10px 10x 0px 0px;
border-radius: 0px 8px 8px 8px;
border-radius: 6px 0px 6px 0px;
SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です