CSS 角丸を表現

CSSで角丸を表現してみよう。

まとめて角丸指定

.クラス名 {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

webkitは、chromeやSafari向け
mozは、Firefox(Mozzila)向け

特定部分だけを角丸指定

.クラス名 {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 25px;
}

要素を加える場合は以下のようにします。

dashedが要素になります。
.クラス名 {
border: 3px dashed #000;/* 細かい点線 */
}

▼その他の要素▼
dashed /* 細かい点線 */
solid /* 線 */
double /* 二重線 */
groove /* 立体線 */
ridge /* 立体線(反転) */
inset /* 立体べた線 */
outset /* 立体べた線(反転) */


コメントを残す

メールアドレスが公開されることはありません。