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