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

テクノロジーカテゴリーの変更を依頼記事元:

coliss.com

277users がブックマークコメント

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-border-radius-exercise-by-jrcharvey.html" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://coliss.com/articles/build-websites/operation/css/css-border-radius-exercise-by-jrcharvey.html">[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック</a><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-border-radius-exercise-by-jrcharvey.html">はてなブックマーク - [CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック</a></div></iframe>

プレビュー

規約違反を報告

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

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。色によっては、蛍光ペン... 角丸を指定できる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です。スラッシュで区切ることにより、水平