How to Put a Border Around Text in HTML

by

Do you want to know how to add a border around text in HTML?

Using CSS border property you can put a border around your text paragraph, in this article we will put a border around text, border in HTML table, border to form in HTML, border on whole page in CSS and last border on image in CSS.

To add a border around text, you can use and <p> element and using CSS you will be able to add a border to your text and style it, for example.

Note: This example is using inline CSS.

Syntax: 

<p style="border: 2px solid greenyellow">Having such a nice workout! :)</p>

This HTML example contains a element with text and a “style” attribute, which has a green border with a two pixel solid border.

Note: This example is using Internal CSS.

Syntax: 

<style>
       .para{border: 2px solid rgb(47, 238, 255)}
</style>

<body>
     <p class="para">Having such a nice workout! :)</p>
</body>

Output:

Above example having a same <p> element with class “pare” with some text and here we use a Internal CSS and with that added a 2px solid width and a color of RGB(47, 238, 255).

If you using <p> a element, add display: inline-block; to the CSS to change it from block to inline-block.

Final output:

You can adjust the border properties like “COLOR, WIDTH, BORDER-TYPE” according to your need.

Here are some borders example with the different styling.

A green border: Having 20px border-radius, green-text-color, double-border-type and 20px width

CSS styling Border-types:

Border-type names:Syntax:
Solid: A solid border.border: 2px solid blue;
Dotted: A dots border.border: 2px dotted red;
Dashed: A dashes border.border: 2px dashed green;
Double: A two double lines borderborder: 2px double orange;
Groove: A 3D grooved borderborder: 2px grooved yellow;
Ridge: A 3D ridge borderborder: 2px ridge grey;
Inset: A 3D inset borderborder: 2px inset hotpink;
Outset: A 3D outset borderborder: 2px outset olivedrab;

And the best part is that you can also combine and mix-match the “border-type” styling for example:

border-style: solid dashed dotted double;

How to add border in HTML table

To add a border to an HTML table you can use the border property by applying it to the table, th and td elements, giving you a border on your table.

Output:

Syntax: 

 table, th, td {
        border: 1px solid black; 
        padding: 8px;
      }

To remove the extra double border like the example image above you can use a CSS property called border-collapse:collapse;

This will remove the double border of your table and this is how it will look in the image below.

table, th, td {
     border-collapse: collapse;
      }

For additional styling options, you can customize properties for your table like border color, background color, border radius, and more.

How to add border to form in HTML

In HTML alone, you cannot add a border to a form or any other HTML element. However, you can achieve this using inline CSS.

By adding a “style” attribute to the tag and giving it a border property with setting its “width”, “border-style”, and “color” you can get a border in your HTML form.

Here is example:

 <form style="border: 2px solid #ccc;">

This example showed a form with a <style> attribute and border style, color, and width, You can change or adjust the style

and this is using internal CSS,

You can add a border by selecting the “Form” tag in the style sheet.

Syntax:

 form {
        border: 2px solid #ccc; /* Set border style, color, and width */
      }

Output:

How to give border to whole page in CSS

If you’re aiming for a solid border around your entire page, ensuring all content stays within its bounds, this is straightforward to achieve.

Simply select the <body> tag in the CSS style sheet and give the body border a 2px solid black, For example

 <style>
     body { 
        margin: 0;  /* Remove default margin */
        padding: 30px; 
        border: 10px solid rgb(59, 0, 238); /* Set border style, color, and width */
        height: 100vh;
      }
</style>

/* HTML code not provided because text length is too long */

Result below.

The example is very simple in way, My HTML contains is <h1> and <p> elements and on this above example has only CSS styling,

Apply a border to the <body> tag in the CSS stylesheet. Set the border width to 10 pixels, the border style to solid, and the border color to RGB(59, 0, 238). And also added some padding for little space form both four side and I remove the default margin,

Always make sure, to add height with his value, the height value will always be set to “100vh” so that the border takes up the height of the entire viewport.

Without adding “height-100vh” If you don’t add height-100vh it looks like this:

Final output:

*Sorry for not adding any style*, By the way this is my full screen.

How to add border to image in HTML

To add border to images using CSS, we will use the border property, for example,

 <style>
    .img-border {
            border: 5px solid rgb(18, 137, 255);    }
  </style>

<body>
    <img src="img.jpg" class="img-border" />
</body>

Output:

The above example, the style sheet contains an element with a class called “img-border” to select and style it. If you have multiple image always use class or id,

Select the class name in the style sheet and add a border 5px solid width and color RGB(18, 137, 255).

You can adjust and customize the border-width, border-style, and border-color properties as per your needs.

I hope this post really helps you to apply borders to your text paragraphs.

You may also want to know: How to center last elements of HTML using CSS Grid (2 steps)

Leave a Comment