Skip to content

Using The Border Attribute to Graphics

The border attribute was traditionally used in HTML to specify the width of the border around an image. However, it has been deprecated in HTML4 and XHTML in favor of using CSS for styling purposes. Modern web development practices recommend using CSS to apply borders to images, providing more flexibility and control over the styling.

Deprecated border Attribute

In early versions of HTML, you could add a border directly to an image using the border attribute within the <img> tag.

Syntax

<img src=”path/to/image.jpg” alt=”Description of the image” border=”1″>

Example

<img src=”images/logo.png” alt=”Company Logo” border=”5″>

In the example above, a border of 5 pixels would be applied around the image.

Using CSS for Image Borders

The modern and preferred method for adding borders to images involves using CSS. This approach allows you to define the style, color, and width of the border, and it provides more design options such as rounded corners and shadows.

Basic Syntax

You can apply a border to an image using the border property in CSS:

img { border: 5px solid black; /* or any other color */ }

Example

<img src=”images/logo.png” alt=”Company Logo” class=”bordered-image”>

 <style> .bordered-image { border: 5px solid black; /* 5-pixel solid black border */ } </style>

In this example, the image with the class bordered-image will have a 5-pixel solid black border.

Advanced CSS Border Styling

CSS allows for more complex styling of image borders, including specifying different styles for each side, adding rounded corners, and applying shadows.

Different Border Styles

img { border-top: 5px solid red; border-right: 5px dashed blue; border-bottom: 5px dotted green; border-left: 5px double purple; }

Rounded Corners

img { border: 5px solid black; border-radius: 10px; /* makes the corners rounded */ }

Box Shadow

img { border: 5px solid black; border-radius: 10px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* adds a shadow */ }

Example Combining All

<img src=”images/logo.png” alt=”Company Logo” class=”styled-image”>

 <style> .styled-image { border: 5px solid black; border-radius: 10px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); }

</style>

Advantages of Using CSS Over the border Attribute

  1. Consistency: Using CSS ensures consistent styling across different elements and pages.
  2. Separation of Concerns: CSS separates style from content, making the HTML cleaner and easier to maintain.
  3. Flexibility: CSS offers more styling options and greater control over the appearance of borders.
  4. Reusability: CSS classes can be reused for multiple elements, reducing redundancy in your code.
  5. Media Queries: CSS allows you to apply different styles based on screen size or other conditions using media queries, enhancing responsive design.

Conclusion

While the border attribute was a simple way to add borders to images in the past, modern web development practices recommend using CSS for styling. CSS provides a more powerful, flexible, and maintainable approach to adding and customizing image borders, allowing for more complex and responsive designs.