48 Simple, Elegant Frame (Box) Designs: Copy-and-Paste CSS
Contents
This post was automatically translated by AI from the Japanese original. The screenshots are in Japanese.
In this post I’ve prepared decorative frame designs you can copy and paste into a free blog, with a simple, grown-up look.
I also explain how to change them to your favorite colors.
Setting a frame around some text makes it stand out in your post and gives the page some rhythm.
Readers usually skim a post. Text inside a frame is more likely to catch their eye with an “Oh!”
If you find a design you like, please give it a try!
I’ll show you CSS frames that work even on free blogs.
With a little effort, your posts become much easier to read and look more stylish.
And if you find yourself thinking I want to reflect my own style even more, moving to WordPress gives you far more freedom in design.
How to use frames on your blog
For beginners: paste the code into your post
The free blogging service you use should have an “HTML tag editing” mode in the post editor.
Paste the code from this post there.
The steps below use three Japanese blogging services: Ameblo, Hatena Blog and Livedoor Blog.
Ameblo
- Click “HTML view” below the post editor and paste the code
- Go back to “Normal view” and change the text
Paste the code in HTML view
Normal view: change the text
Hatena Blog
- Click “HTML editing” to the right of the “WYSIWYG” mode and paste the code
- Go back to “WYSIWYG” mode and change the text
Paste the code in HTML editing mode
Change the text in WYSIWYG mode
Livedoor Blog
- Click “HTML tag editing” on the right side of the editor and paste the code
- Click “HTML tag editing” again to return to normal mode, then change the text
Turn HTML tag editing ON and paste the code
Turn HTML tag editing OFF and replace the text
[Advanced] If you can edit CSS:
If you know CSS, you can also put the code from this post into your CSS file.
For example, take this code:
<div style="border:1px solid #f4978e; padding:16px; margin:20px;">Your text here</div>Write the part inside <div style="..."> in your CSS file.
In WordPress, you can edit it from Appearance > Theme File Editor > style.css.
For the example above, add this to the file:
.box{ border:1px solid #97D3D3; padding:16px; margin:20px;}You can give “box” in .box any name you like.
Where you want to use the frame, specify the name you used in the CSS (“box”) as the class.
In WordPress, enter the class name under “Advanced” > “Additional CSS class(es)” at the bottom right of the block settings.
<div class="box"> Your text here</div>Thin line frames
Pink
<div style="border:1px solid #f4978e; padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:1px solid #98c1d9; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:1px solid #a4c3b2; padding:16px; margin:20px;">Your text here</div>Thick line frames
Increase the px value of border to make the line thicker.
2px border
Pink
<p><br /></p><div style="border:2px solid #f4978e; padding:16px; margin:20px;">Your text here</div><p><br /></p>Blue
<p><br /></p><div style="border:2px solid #98c1d9; padding:16px; margin:20px;">Your text here</div><p><br /></p>Green
<p><br /></p><div style="border:2px solid #a4c3b2; padding:16px; margin:20px;">Your text here</div><p><br /></p>3px border
Pink
<p><br /></p><div style="border:3px solid #f4978e; padding:16px; margin:20px;">Your text here</div><p><br /></p>Blue
<p><br /></p><div style="border:3px solid #98c1d9; padding:16px; margin:20px;">Your text here</div><p><br /></p>Green
<p><br /></p><div style="border:3px solid #a4c3b2; padding:16px; margin:20px;">Your text here</div><p><br /></p>A line that is too thick tends to look clunky, so I recommend staying at 5px or less!
Dashed frames
Thin dashed line
Pink
<div style="border:1px dashed #f4978e; padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:1px dashed #98c1d9; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:1px dashed #a4c3b2; padding:16px; margin:20px;">Your text here</div>Thick dashed line
Pink
<div style="border:2px dashed #f4978e; padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:2px dashed #98c1d9; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:2px dashed #a4c3b2; padding:16px; margin:20px;">Your text here</div>Dotted frames
Dots can make it look cuter, don’t you think?
Small dots
Pink
<div style="border:3px dotted #f4978e; padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:3px dotted #98c1d9; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:3px dotted #a4c3b2; padding:16px; margin:20px;">Your text here</div>Large dots
Pink
<div style="border:5px dotted #f4978e; padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:5px dotted #98c1d9; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:5px dotted #a4c3b2; padding:16px; margin:20px;">Your text here</div>Double line frames
Pink
<div style="border:5px double #f4978e; padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:5px double #98c1d9; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:5px double #a4c3b2; padding:16px; margin:20px;">Your text here</div>Rounded corners
Pink
<div style="border:2px solid #f4978e;border-radius:10px;padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:2px solid #98c1d9; border-radius:10px; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:2px solid #a4c3b2; border-radius:10px; padding:16px; margin:20px;">Your text here</div>Frames with a background color
I think it looks cute when the border is thin and just a little darker than the background color ☺️
Solid border
Pink
<div style="border:2px solid #f4978e;background-color:#f8edeb;padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:2px solid #98c1d9; background-color:#eaf4f4;border-radius:10px; padding:16px; margin:20px;">Your text here</div>Green
<div style="border:2px solid #a4c3b2;background-color:#F3F7F5;padding:16px; margin:20px;">Your text here</div>Double border
Pink
<div style="border:5px double #f4978e;background-color:#f8edeb;padding:16px; margin:20px;">Your text here</div>Blue
<div style="border:5px double #98c1d9; background-color:#eaf4f4;padding:16px; margin:20px;">Your text here</div>Green
<div style="border:5px double #a4c3b2;background-color:#F3F7F5;padding:16px; margin:20px;">Your text here</div>A border that fades a little
Pink
<div style="background-color:#f4978e;padding:6px;margin:20px;"><div style="background-color:rgba(255, 255, 255, 0.5);border:1px solid #b4b4b4;box-shadow:0 0 0 6px #f4978e;padding:16px;">Your text here</div></div>Blue
<div style="background-color:#98c1d9;padding:6px;margin:20px;"><div style="background-color:rgba(255, 255, 255, 0.6);border:1px solid #b4b4b4;box-shadow:0 0 0 6px #98c1d9;padding:16px;">Your text here</div></div>Green
<div style="background-color:#a4c3b2;padding:6px;margin:20px;"><div style="background-color:rgba(255, 255, 255, 0.5);border:1px solid #b4b4b4;box-shadow:0 0 0 6px #a4c3b2;padding:16px;">Your text here</div></div>White line frames
Dashed line, stitched look
Pink
<div style="border:2px dashed #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">Your text here</div>Blue
<div style="border:2px dashed #ffffff;background-color:#eaf4f4;box-shadow:0 0 0 6px #eaf4f4;padding:16px;margin:20px;">Your text here</div>Green
<div style="border:2px dashed #ffffff;background-color:#F3F7F5;box-shadow:0 0 0 6px #F3F7F5;padding:16px;margin:20px;">Your text here</div>Solid line, notice style
Pink
<div style="border:3px solid #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">Your text here</div>Blue
<div style="border:3px solid #ffffff;background-color:#eaf4f4;box-shadow:0 0 0 6px #eaf4f4;padding:16px;margin:20px;">Your text here</div>Green
<div style="border:3px solid #ffffff;background-color:#F3F7F5;box-shadow:0 0 0 6px #F3F7F5;padding:16px;margin:20px;">Your text here</div>White double line, for a stylish look
Pink
<div style="border:5px double #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">Your text here</div>Blue
<div style="border:5px double #ffffff;background-color:#eaf4f4;box-shadow:0 0 0 6px #eaf4f4;padding:16px;margin:20px;">Your text here</div>Green
<div style="border:5px double #ffffff;background-color:#F3F7F5;box-shadow:0 0 0 6px #F3F7F5;padding:16px;margin:20px;">Your text here</div>Frames with a shadow
Sharp shadow
Pink
<div style="border:1px solid #f4978e;box-shadow: 4px 4px 1px #f4978e;padding:16px;margin:20px;">Your text here</div>Blue
<div style="border:1px solid #98c1d9;box-shadow: 4px 4px 1px #98c1d9;padding:16px;margin:20px;">Your text here</div>Green
<div style="border:1px solid #a4c3b2;box-shadow: 4px 4px 1px #a4c3b2;padding:16px;margin:20px;">Your text here</div>Soft shadow
Pink
<div style="background-color:#f8edeb;box-shadow: 0px 0px 8px 8px #f8edeb;padding:16px;margin:20px;">Your text here</div>Blue
<div style="background-color:#eaf4f4;box-shadow: 0px 0px 8px 8px #eaf4f4;padding:16px;margin:20px;">Your text here</div>Green
<div style="background-color:#F3F7F5;box-shadow: 0px 0px 8px 8px #F3F7F5;padding:16px;margin:20px;">Your text here</div>Easy tweak: changing the colors
Colors use a color code (in Japanese): a # followed by six letters and digits, like “#FFFFFF”.
Swap the color code to change the color.
color…text color
background-color…background color
I pick colors from Coolors, a site that shows stylish color palettes.
I hope you find a design you like.
