どうも、ソエです。

今回は、borderにどれくらいの種類があるのかをまとめてみました!
borderはsolidをよく使いますが、知ってて損はないですからね!

では、どうぞ!

一本線(solid)

一本線です。
p{
border: solid 1px #333;
padding: 10px;
}

二本線(double)

二本線です。
p{
border: double #333;
padding: 10px;
}

破線(dashed)

破線です。
p{
border: dashed 1px #333;
padding: 10px;
}

点線(dotted)

点線です。
p{
border: dotted 1px #333;
padding: 10px;
}

窪んだ線(groove)

窪んだ線です。
p{
border-left: groove;
border-top: groove;
padding: 10px;
}

立体的に窪んだ線(inset)

立体的に窪んだ線です。
p{
border: inset;
padding: 10px;
}

高く盛り上がった線(ridge)

高く盛り上がった線です。
p{
border-right: ridge;
border-bottom: ridge;
padding: 10px;
}

立体的に盛り上がった線(outset)

立体的に盛り上がった線です。
p{
border: outset;
padding: 10px;
}

終わりに

いかがでしょうか。
結構ありますよね。

ニューモフィズムに似たようなものも、borderだけでも作れそうですし、皆さんも使ってみて下さい。

では、ご閲覧ありがとうございました。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

borderの種類をまとめてみた