CSSで角丸を一括で指定
border-radius:10px;
バラバラに指定してもいい
border-top-left-radius:5px; /* 左上 */ border-top-right-radius:5px; /* 右上 */ border-bottom-left-radius:20px; /* 右下 */ border-bottom-right-radius:20px; /* 左下 */
各プラウザに対応させるためにベンダープレフィックスを一緒に書く
border-radius: 10px; /* 不特定 */ -webkit-border-radius: 10px; /* Google Chrome、Safari */ -moz-border-radius: 10px; /* Firefox */ -ms-border-radius: 10px; /* Internet Explorer */ -khtml-border-radius: 10px; /* Linux browsers */ -o-border-radius: 10px; /* Opera */
複合させるとこんな感じ
/* 不特定 */ border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; /* Google Chrome、Safari */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; /* Firefox */ -moz-border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; -moz-border-bottom-right-radius: 20px; -moz-border-bottom-left-radius: 20px; /* Internet Explorer */ -ms-border-top-left-radius: 5px; -ms-border-top-right-radius: 5px; -ms-border-bottom-right-radius: 20px; -ms-border-bottom-left-radius: 20px; /* Linux browsers */ -khtml-border-top-left-radius: 5px; -khtml-border-top-right-radius: 5px; -khtml-border-bottom-right-radius: 20px; -khtml-border-bottom-left-radius: 20px; /* Opera */ -o-border-top-left-radius: 5px; -o-border-top-right-radius: 5px; -o-border-bottom-right-radius: 20px; -o-border-bottom-left-radius: 20px;
よくわかんないけど
また違う方法?も?
CSSに記述
.border_radius {
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
要素に角丸を指定する
HTMLに記述
<div class="border_radius"> 表示する内容 </div>
画像に角丸を指定する
HTMLに記述
参照ページ
CSS3で画像や要素を角丸にして表示する「border-radius」
まだ試していませんが、アイキャッチを丸くする方法です
.attachment-thumb150 { width: 150px; border-radius: 150px; /* 不特定 */ -webkit-border-radius: 150px; /* Google Chrome、Safari */ -moz-border-radius: 150px; /* Firefox */ -ms-border-radius: 150px; /* Internet Explorer */ -khtml-border-radius: 150px; /* Linux browsers */ -o-border-radius: 150px; /* Opera */ border: 1px solid #eceae7; }