{"id":6313,"date":"2019-12-12T21:46:24","date_gmt":"2019-12-12T20:46:24","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=6313"},"modified":"2019-12-12T21:46:24","modified_gmt":"2019-12-12T20:46:24","slug":"comicbook-inspired-hand-drawn-borders-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/comicbook-inspired-hand-drawn-borders-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","title":{"rendered":"Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40"},"content":{"rendered":"

\"\"<\/a><\/p><\/blockquote>\n

Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40<\/a><\/em><\/h1>\n

<\/p>\n

 <\/p>\n

Here are some pure CSS<\/a> borders that looks like it was pulled from a comic book, it has got that distinct hand-drawn look and feel<\/a> to it. If you are going for a comic book inspired layout<\/a> for your page you will love this.<\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

<div class="box box1">
\n<div class="oddboxinner"> bangers?<\/div>
\n<\/div>
\n<div class="box box2">
\n<div class="evenboxinner"> bangers!<\/div>
\n<\/div>
\n<div class="box box3">
\n<div class="oddboxinner"><\/div>
\n<\/div><\/code><\/p>\n

<\/code><\/p>\n

@import url(https:\/\/fonts.googleapis.com\/css?family=Bangers);<\/p>\n

<\/code><\/p>\n

body{
\nbackground:#fff;
\nfont-family: ‘Bangers’, cursive;
\nfont-size: 25px;
\n}
\n.box{
\nmargin:25px;
\nwidth:250px;
\nheight:250px;
\nbackground:#fff;
\nborder: solid black;
\nborder-color: black;
\nfloat:left;
\n}<\/p>\n

<\/code><\/p>\n

.box1{
\nborder-width: 3px 4px 3px 5px;
\nborder-radius:95% 4% 92% 5%\/4% 95% 6% 95%;
\ntransform: rotate(2deg);
\n}
\n.box2{
\nwidth:350px;
\nborder-width: 3px 3px 5px 5px;
\nborder-radius:4% 95% 6% 95%\/95% 4% 92% 5%;
\ntransform: rotate(-2deg);
\n}<\/p>\n

<\/code><\/p>\n

.box3{
\nborder-width: 5px 3px 3px 5px;
\nborder-radius:95% 4% 97% 5%\/4% 94% 3% 95%;
\ntransform: rotate(2deg);
\n}<\/p>\n

<\/code><\/p>\n

.oddboxinner{
\nmargin:15px;
\ntransform: rotate(-2deg);
\n}
\n.evenboxinner{
\ntransform: rotate(2deg);
\nmargin:15px;
\npadding:0 5px;
\nfloat:right;
\nbackground:#ddd;
\nborder:1px solid #222;
\nbox-shadow:3px 3px 0 #222;
\n}<\/p>\n

<\/code><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Comicbook Inspired Hand Drawn Borders \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40<\/p>\n

Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[18,46],"tags":[],"class_list":["post-6313","post","type-post","status-publish","format-standard","hentry","category-themes","category-web"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1DP","jetpack-related-posts":[{"id":6310,"url":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/hand-drawn-border-buttons-in-css-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","url_meta":{"origin":6313,"position":0},"title":"Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40","author":"Paolo Redaelli","date":"2019-12-12","format":false,"excerpt":"Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font. Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I\u2026","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5307,"url":"https:\/\/monodes.com\/predaelli\/2019\/02\/26\/bangers-font\/","url_meta":{"origin":6313,"position":1},"title":"Bangers Font","author":"Paolo Redaelli","date":"2019-02-26","format":"link","excerpt":"Download Bangers Font \u00b7 Free for commercial use \u00b7 Bangers is a comicbook style font which packs a punch! It was designed in the style of mid-20th century superhero comics cover lettering in mind. Source: Bangers Font \u00b7 1001 Fonts","rel":"","context":"In "Fonts"","block_context":{"text":"Fonts","link":"https:\/\/monodes.com\/predaelli\/category\/fonts\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7323,"url":"https:\/\/monodes.com\/predaelli\/2020\/06\/08\/css-pseudo-selectors-you-might-have-missed-bits-and-pieces\/","url_meta":{"origin":6313,"position":2},"title":"CSS Pseudo-Selectors You Might Have Missed – Bits and Pieces","author":"Paolo Redaelli","date":"2020-06-08","format":"link","excerpt":"Useful CSS pseudo-classes that are often overlooked. Source: CSS Pseudo-Selectors You Might Have Missed - Bits and Pieces (Pseudo) selectors let you assign styles to what are, in effect, phantom classes that are inferred by the state of certain elements, or markup patterns within the document, or even by the\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/06\/1Nj2EzGOskF51B5AKuR-szw.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6710,"url":"https:\/\/monodes.com\/predaelli\/2020\/02\/22\/borders\/","url_meta":{"origin":6313,"position":3},"title":"Borders","author":"Paolo Redaelli","date":"2020-02-22","format":false,"excerpt":"I do like Gutenberg, the \"next-gen\" Wordpress editor. Yet it is still in its infancy as there are many little graphical customization that its basic blocks does not allow for. Neither the old editor allowed them, I must acknoledge, but you could switch to the HTML code and add a\u2026","rel":"","context":"In "Fun"","block_context":{"text":"Fun","link":"https:\/\/monodes.com\/predaelli\/category\/fun\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/02\/Screenshot_2020-02-22-Comunit%C3%A0-in-cammino-23-febbraio-2020-Pastorale-Desio.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/02\/Screenshot_2020-02-22-Comunit%C3%A0-in-cammino-23-febbraio-2020-Pastorale-Desio.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/02\/Screenshot_2020-02-22-Comunit%C3%A0-in-cammino-23-febbraio-2020-Pastorale-Desio.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/02\/Screenshot_2020-02-22-Comunit%C3%A0-in-cammino-23-febbraio-2020-Pastorale-Desio.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":14555,"url":"https:\/\/monodes.com\/predaelli\/2025\/12\/28\/wired-elements\/","url_meta":{"origin":6313,"position":4},"title":"Wired Elements","author":"Paolo Redaelli","date":"2025-12-28","format":false,"excerpt":"Wired Elements, the perfect compation of rough.js A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same \u2014 just like\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5871,"url":"https:\/\/monodes.com\/predaelli\/2019\/08\/05\/printable-rpg-is-creating-hand-drawn-rpg-maps-patreon\/","url_meta":{"origin":6313,"position":5},"title":"Printable RPG is creating hand-drawn RPG Maps | Patreon","author":"Paolo Redaelli","date":"2019-08-05","format":false,"excerpt":"Become a patron of Printable RPG today: Read 67 posts by Printable RPG and get access to exclusive content and experiences on the world\u2019s largest membership platform for artists and creators. Source: Printable RPG is creating hand-drawn RPG Maps | Patreon","rel":"","context":"In "Role Play Games"","block_context":{"text":"Role Play Games","link":"https:\/\/monodes.com\/predaelli\/category\/games\/role-play-games\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/6313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=6313"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/6313\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=6313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=6313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=6313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}