丸角：1pxの白画像で作る丸角

ここでは応用力の高い簡単な丸角の作り方を掲載しています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：1px　高さ：1px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

1×1ピクセルの白の画像を作る。

作成した新規ファイルに鉛筆ツールを使い白で塗りつぶします。色が白なのはサイトの背景色を白と過程した場合です。サイトの背景色にあわせて変更してください。

画像があまりにも小さいのでここでは完成画像を省きます。

CSSで丸角を作る

1pxの白の画像を丸角にしたい部分にCSSを使い配置します。

htmlです。

<div><p>丸角</p></div>

cssです。

div{/*左の上に白の画像を指定*/
　width:100px;
　background:url("1pxの白の画像へのパス") no-repeat left top #0000ff;
}
div p{/*右の上に白の画像を指定*/
　margin:0;
　padding:0;
　background:url("1pxの白の画像へのパス") no-repeat right top;
　color:#fff;
　text-align:center;
}

結果

解説

白の1ピクセルの画像をそれぞれ右上と左上に指定し角を削った感じを実現しています。
上の部分と下の部分を比べてみると、少し角をけずっただけでやわらかい印象を与えることができるとわかると思います。

この丸角の作り方は横幅を可変タイプ（%指定)にしても大丈夫なのが特徴です。
ちなみに当サイトのメニューの部分もこの方法で丸角にしています。

▲トップ