How to add border in Html

In Html, we can add the border using the following two different ways:

Using Inline Style attribute
Using Internal CSS

Using Inline Style attribute

If we want to add the border in Html using the inline style attribute, then we have to follow the steps which are given below. Using these steps, any user can easily create the border.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the inline property for adding the border.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the border using inline property
</Title>
</Head>
<Body> 
<h1> Hello User </h1>
<h2> Your are at JavaTpoint Site </h2>
</Body> 
</Html>

Step 2: Now, place the cursor inside the opening tag of that text around which we want to add the border. And then, we have to type the style attribute. And then, we have to type the border property in the style attribute same as shown in the following block:

Step 3: And then we have to give the border color in the border property.

Step 4: We can also give the style and width of the border which we want to add in the Html code. If we want to add then we have to type the border-width and border-style property just after the border property.

<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the border using inline property
</Title>
</Head>
<Body> 
<font style="border:blue; border-width:10px; border-style:outset;">
JavaTpoint </font>
<center>
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
<h2 style="border:green; border-width:8px; border-style:dashed"> Your are at JavaTpoint Site!.... </h2>
</center>
</Body> 
</Html>

Test it Now

The output of above Html code is shown in the following screenshot:

Using Internal CSS

If we want to add the border in Html using Internal CSS, then we have to follow the steps which are given below. Using these steps, any user can easily create the border.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Internal CSS for adding the border.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the border using internal CSS
</Title>
</Head>
<Body> 
JavaTpoint
<center>
Hello User!!! 
Your are at JavaTpoint Site!.... 
</center>
</Body> 
</Html>

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the <style> tag, as shown in the following block. And then type the properties of border attribute into the id selector.

<Head>    
<Title>   
Add the border using internal CSS
</Title>
<style type = "text/css">
  h1 {
  border-color: blue;
  border-width: .25em;
  border-style: double;
  }
h2 {
  border-color: orange;
  border-width: 5px;
  border-style: inset;
  }
</style>
</Head>

Step 3: And, at last, we have to save the file and then run the file in the browser.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the border using internal CSS
</Title>
<style type = "text/css">
  h1 {
  border-color: blue;
  border-width: .25em;
  border-style: double;
  }
h2 {
  border-color: orange;
  border-width: 5px;
  border-style: inset;
  }
</style>
</Head>
<Body> 
JavaTpoint
<center>
<h1> Hello User!!! </h1>
<h2> Your are at JavaTpoint Site!.... </h2>
</center>
</Body> 
</Html>

Test it Now

The output of above Html code is shown in the following screenshot: