[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。
色によっては、蛍光ペンや絵筆みたいにもできますね。

デモのキャプチャ

HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。

デモのキャプチャ

デモページ
※リンク切れ

実装は、こんな感じです。

HTML

要素はdivだけ、入れ子もラッパーも必要ありません。

<body>
  <div>
    This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?
  </div>
</body>

CSS

落書き風のボーダーを実現しているのは、border-radiusです。
スラッシュで区切ることにより、水平と垂直方向の半径を設定しています。

div {
  border:solid 5px #0ff;
  width:200px;
  margin:25px auto;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding:10px;
}

半径にこんな大きな値を使ったことなかったw

top of page

©2017 coliss