How to add border in Html
To add a border to an HTML element, you can use CSS. There are multiple ways to add borders, including applying styles directly to the HTML element using the style attribute or defining CSS rules in an external stylesheet. Here are two common approaches:
- Inline Style:
You can use thestyleattribute to add a border directly to an HTML element. Thestyleattribute accepts CSS property-value pairs. For example, to add a red border to a<div>element, you can do the following:
<div style="border: 2px solid red;">
Content goes here
</div>In this example, the style attribute is used to set the border property. The value 2px defines the width of the border, solid specifies the border style, and red sets the border color.
- External Stylesheet:
You can define a CSS rule in an external stylesheet and link it to your HTML document using the<link>tag. Here’s an example:
CSS (styles.css):
.my-element {
border: 2px solid blue;
}HTML:
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="my-element">
Content goes here
</div>
</body>
</html>In this example, the CSS rule with the class selector .my-element defines the border style. The <link> tag is used to link the external stylesheet (styles.css) to the HTML document. The <div> element with the my-element class will have the specified border style applied.
These are just basic examples, and you can customize the border properties (e.g., width, style, color) according to your specific requirements. CSS provides many options to control the appearance of borders, including different styles, colors, widths, and even rounded corners.