HTML - border Attribute

The border of an HTML element, such as tables and images, can be specified using the HTML border attribute. You can specify the border's width and color to surround the element. You can provide the border's color using either a hexadecimal color code or a color name, and you can also specify the border's thickness in pixels or as a percentage.

The style and structure of web pages can be improved by using this feature, which is especially helpful for modifying the visual appearance of elements.

Syntax

Following is the syntax of the HTML ‘border’ attribute −

<tag border = "value"></tag>

Example

In the following program, we are using HTML 'border' attribute within <table> tag to set the border of the entire table.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML border attribute</title>
</head>
<body>
   <!-- Example of the HTML 'border' attribute -->
   <h3>Example of the HTML 'border' attribute with table</h3>
   <p>User details</p>
   <table border='1'>
      <tr>
         <th>S.No</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>1.</td>
         <td>Revathi</td>
         <td>22</td>
      </tr>
      <tr>
         <td>2.</td>
         <td>Sarika</td>
         <td>22</td>
      </tr>
   </table>
</body>
</html>

When we run the above code, it will generate an output consisting of the table filled with data displayed on the webpage.

Example

Considering the another scenario, where we are going to use the border attribute with the img tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML border attribute</title>
   <style>
      img {
         width: 300px;
      }
   </style>
</head>
<body>
   <!-- Example of the HTML 'border' attribute -->
   <h3>Example of the HTML 'border' attribute with img</h3>
   <img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" border='5'>
</body>
</html>

On running the above code, the output window will pop up displaying the image along with a border applied to it on the webpage.

Example

In this program, we are defining the container for external sources using the ‘object’ element. Then, we use the ‘border’ element within the <object> tag to set the border of the ‘object’ element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML border attribute</title>
   <style>
      object {
         width: 200px;
         height: 100px;
      }
   </style>
</head>
<body>
   <!-- Example of the HTML 'border' attribute -->
   <h3>Example of the HTML 'border' attribute with object</h3>
   <object data="https://www.tutorialspoint.com/static/images/simply-easy-learning.png" border='4'>TutorialsPoint</object>
</body>
</html>

When we run the above code, it will generate an output displaying the image with a border on the webpage.

html_attributes_reference.htm
Advertisements