Border in HTML

In HTML

you can apply borders to elements to create visual separation or emphasis. Borders can be added to various HTML elements such as paragraphs

headings

images

tables

etc. The border property in CSS allows you to control the style

color

and width of the border.

 

Border Properties

The border property is used to set the style

color

and width of the border. It can be specified in the CSS file or inline within the HTML tag. The syntax of the border property is as follows:

 

    
 border: [border-width] [border-style] [border-color];
 
  

 

• border-width: Specifies the width of the border. It can be set in pixels (px)

  em

  rem

  or as a keyword like thin

  medium

  or thick.

• border-style: Specifies the style of the border. It can be solid

  dashed

  dotted

  double

  groove

  ridge

  inset

  or outset.

• border-color: Specifies the color of the border. It can be set using a color name

  RGB value

  or hexadecimal value.

 

Examples

Let's see some examples of how we can use the border property in HTML:

 

Example 1: Border on Paragraph

    
 <p style="border: 2px solid red;">This is a paragraph with a red solid border.</p>
 
  

This is a paragraph with a red solid border.

 

Example 2: Border on Heading

    
 <h2 style="border: 1px dashed blue;">This is a heading with a blue dashed border.</h2>
 
  

This is a heading with a blue dashed border.

 

Example 3: Border on Image

    
 <img src="image.jpg" alt="Image" style="border: 3px dotted green;">
 
  

 

Example 4: Border on Table

    
 <table style="border-collapse: collapse;">
 <tr>
 <td style="border: 1px solid black;">Cell 1</td>
 <td style="border: 1px solid black;">Cell 2</td>
 </tr>
 <tr>
 <td style="border: 1px solid black;">Cell 3</td>
 <td style="border: 1px solid black;">Cell 4</td>
 </tr>
 </table>
 
  

Cell 1	Cell 2
Cell 3	Cell 4

 

Conclusion

Borders in HTML can be styled using the border property in CSS. They can be applied to various elements to create visual separation or emphasis. By controlling the width

style

and color of the border

you can customize the appearance of your web page.