HTML - border Attribute



HTML border attribute is used to specify the width of the border around a table element, but it is deprecated in favor of using CSS for styling.

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

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

Applies On

Below listed elements allow using of the HTML bgcolor attribute.

Element Description
<img> HTML <img> tag is used to append images in document
<table> HTML <table> tag allow us to arrange data in a organized way by providing row and column facility.
<object> HTML <object> is used to show multimedia on web pages, including audio, video, pictures, PDFs, and Flash.

Examples of HTML border Attribute

Following codes demonstrate the usages of border attribute

Border for table Element

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>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>

Border to an img Element

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>

Border for object Element

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>

Supported Browsers

Attribute Chrome Edge Firefox Safari Opera
border Yes Yes Yes Yes Yes
html_attributes_reference.htm
Advertisements