cssで枠線を描く方法と、枠線の角を丸くする方法_100086

mama

8年前

みなさまのブログで、オシャレな枠線を利用されているのをたくさん見かけますが、イメージなどを使わずに、cssだけで枠線をアレンジできる方法があります。

まず、枠線自体は、

.waku {
    border: thin solid #0082B2;
    margin: 2em;
    padding: 2em;
}

これだけでできてしまいます。

実際に表示してみると、このような感じです。

ただ、これでは寂しすぎますね。

次は枠線の種類を変えてみたいと思います。

先ほどのコードの「thin」の部分が「線の太さ」、「solid」の部分が「線の種類」、「#0082B2」の部分が「線の色」になります。

今度は「線の太さ」を「5px」、「線の種類」を「点線」、「線の色」を「黄緑」に変えてみたいと思います。

.waku {
    border: 5px dotted #A3B745;
    margin: 2em;
    padding: 2em;
}

表示してみると…

少し太めの点線の枠に変わりました。
これだけでも、イメージが変わると思います。

次は、枠線の角を丸くしてみます。

.waku {
    border: 4px dotted #660099;
    border-radius: 20px;
    margin: 2em;
    padding: 2em;
}

表示してみると…

3行目の「border-radius: 20px;」が角を丸くしてくれています。
「20px」の部分は数字を大きくすると、丸みも大きくなります。

「線の色や太さ」も大きく影響しますが「角が丸いか四角いか」で、ずいぶんイメージが変わります。
cssに1行加えるだけで、簡単に角を丸くできるので、是非お試しください♪