Border in HTML
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 soliddashed
dotted
double
groove
ridge
inset
or outset.
border-color: Specifies the color of the border. It can be set using a color nameRGB value
or hexadecimal value.
Examples
Lets 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="https://www.3000.cn/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 1Cell 2Cell 3Cell 4Conclusion
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.