CSS3 divなどで角を丸くする方法
簡単だけどよく使う。
[amazonjs asin="B00M0ESXUI" locale="JP" title="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"]
4角を丸くする場合は以下のように指定する。
[css]
border-radius: 10px;
/* Safari,Chrome */
-webkit-border-radius: 10px;
/* Firefox */
-moz-border-radius: 10px;
[/css]
以下のようにして適用してみる。
[css]
.main {
border-radius: 10px;
/* Chrome Safari */
-webkit-border-radius: 10px;
/* Firefox */
-moz-border-radius: 10px;
padding: 10px;
background-color: #EEEEEE;
}
[/css]
部分的に角を丸くする場合は、
[css]
/* Chrome Safari 左上 */
-webkit-border-top-left-radius: 10px;
/* Chrome Safari 右上 */
-webkit-border-top-right-radius: 10px;
/* Chrome Safari 右下 */
-webkit-border-bottom-right-radius: 10px;
/* Chrome Safari 左下 */
-webkit-border-bottom-left-radius: 10px;
/* Firefox 左上 */
-moz-border-radius-topleft: 10px;
/* Firefox 右上 */
-moz-border-radius-topright: 10px;
/* Firefox 右下 */
-moz-border-radius-bottomright: 10px;
/* Firefox 左下 */
-moz-border-radius-bottomleft: 10px;
[/css]
でできる。