Step 4 - How To Create A Border in HTML

In the previous steps, you created a colored box with text.

Let's say, you just want a border around your content.

You do not want a colored box. You just want a color border around your text on white background.

You start with the same HTML box code provided on previous pages of this training. Then, you adjust it to only display a border.

Here is how to create a border in HTML. This border can apply to text and images.

1. Access Text Editor Tab

As mentioned previously, you need to work with HTML in the Text Editor view.


2. Copy and Paste Border Code

To add a blue border box, copy and paste this code below within your content, where you want the box display.

<div style="border: 5px solid #00aeef; padding: 10px 20px 10px 20px;">THIS IS YOUR BLUE BORDER BOX FOR YOUR TEXT. INSERT YOUR OWN TEXT HERE.</div>


The code for a blue border is this:

border: 5px solid #00aeef;

The breakout for the border is this:

  • 5px = width of border
  • solid = solid border
  • #00aeef = blue color

The additional code behind the border is for padding:

padding: 10px 20px 10px 20px;

Padding adds space between the border of the box and your text.

This space keeps your text from displaying on the line and helps make your box text more readable.

Want a Black Border Box?

Just replace #00aeef with #000000. #000000 is the HEX color for black.

The code for a black border is this:

border: 5px solid #000000;

The code for a black border box is this:

<div style="border: 5px solid #000000; padding: 10px 20px 10px 20px;">THIS IS YOUR BLACK BORDER BOX FOR YOUR TEXT. INSERT YOUR OWN TEXT HERE.</div>

The only thing that changed in the black border box vs. the blue border box is the HEX color code.

You can change the border color to any color you want. Just replace the HEX color code.

Refer to the previous page if you want to know how to find HEX color codes using the WordPress Text Color picker.

Here is a another border example.

In the example above, we not only have enclosed text inside a blue border box, we have also called out a few words with the Headline tag.

The code for a blue border and headline box is this:

<div style="border: 5px solid #00aeef; font-weight: 400; padding: 10px 20px 10px 20px; margin-bottom: 20px;"><h3>INSERT A HEADLINE</h3>THIS IS YOUR REGULAR TEXT INSIDE BOX. INSERT YOUR OWN TEXT HERE.</div>

Want a Box Border and Background Color Box?

The code for a black border and blue box with white text is this:

<div style="border: 5px solid #000000; background-color: #00aeef; color: #ffffff; font-weight: 400; padding: 10px 20px; text-align: center;">THIS IS YOUR BLACK BORDER AND BLUE BACKGROUND BOX FOR YOUR TEXT.INSERT YOUR OWN TEXT HERE.</div>

Copy and paste this code inside your content where you want the box.

(Make sure you do this in the Text Editor tab. The Visual Editor tab will not work.)

The code breakout for the border and box background color is this:

  • border: 5px solid #000000; = black border
  • background-color: #00aeef; = blue background
  • color: #ffffff; = white text

Just be creative. There is 1001+ ways you can customize these content boxes for your own content.

Now, let's learn how to use HTML code to create a button. Yes, it is still very easy!

Next Page -> How To Create a Button in HTML



Join the Discussion
Write something…
Recent messages
Jadatherapy Premium
Thank you for this training

Really appreciate this training because I always wanted to know how to create boxes and then you came along.

Much appreciated

Jennifer
Reply
kimwolfe Premium
Yay Jennifer :) Hit me up if you have any questions.

Hopefully, you will be surprised at how easy it is. Especially for buttons. No plugins or images needed.

Keep me posted how this goes!

Kim
Reply
Jadatherapy Premium
Thank you will do when I get round to it. lol

But I think I will need your help so thank you for the offer.

Jennifer
Reply
kimwolfe Premium
Just don't fear it. It really is easier than you think. Especially, since you can just copy my codes and then edit them in visual editor view of WordPress.
Reply
Jadatherapy Premium
Thank you I will not leave it too long because I want to add to new articles.

Jennifer
Reply
Claudiojuan Premium
Thank you very much very interesting training I am always looking to place the least amount of plugins on my sites. Everything that is HTML and CSS codes seems great to me. Regards!
Reply
kimwolfe Premium
Yes, it is easier than you make think. And there are tons of free resources online to continue your training. Let me know if you have any questions.
Reply
Claudiojuan Premium
OK Kim All questions about HTML and CSS codes you will be my teacher. Thank you!
Reply
kimwolfe Premium
Awesome. I am here for ya :)
Reply
Chrissies Premium
Many thanks Kim :)
Reply
kimwolfe Premium
Thanks Chrissies! Hope this helps.
Reply
Triblu Premium
An EXCELLENT tutorial Kim, Thank YOU!
Reply
kimwolfe Premium
Hey Trish. HUGE THANKS! Appreciate you chiming in and stopping by here.
Reply
merlynmac Premium
Great how-to! I do have on issue. Lesson 4 isn't loading for me. That's the lesson on "How To Change Box Color in HTML". If I'm on Lesson 3 and click on Next Page -> it doesn't work. If I use the menu to get to lesson 4 it doesn't work and if I jump to Lesson 5 and try to go back to lesson 4 using the <- Previous Page button it doesn't work. Everything else is golden!
Reply
merlynmac Premium
Lesson's 6 and 7 are also broken.
Reply
kimwolfe Premium
Hey thanks for the heads up here. I will see if I can figure out how to fix. Thanks again.
Reply
merlynmac Premium
It may not be your training...It looks like the WA servers are having issues....Reach out to support to see if that's the issue. If so, you might not have to do anything but wait.
Reply
kimwolfe Premium
I’ll wait it out then and go from there. Thanks again.
Reply
kimwolfe Premium
Can you confirm you access lessons 4 - 7? I think the issue should be fixed now.
Reply
merlynmac Premium
Confirmed..I can now access all lessons.
Reply
kimwolfe Premium
Thank you :)
Reply
Top