CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border

CSS border properties are used to add borders to HTML elements. Borders can be used to enhance the appearance of an element or to separate it from other elements on the page. In this article, we will discuss the different border properties available in CSS and how to use them.

Border Property

The border property is used to set the width, style, and color of an element's border. It can be applied to any HTML element. The syntax for the border property is as follows:

<element style="border: width style color;">

The width parameter specifies the width of the border in pixels, ems, or other units. The style parameter specifies the style of the border, such as solid, dotted, dashed, double, groove, ridge, inset, or outset. The color parameter specifies the color of the border, using a color name, RGB value, or hexadecimal value.

For example, the following code sets a 2-pixel solid red border around a paragraph element:

<p style="border: 2px solid red;">This is a paragraph with a border.</p>

The result will look like this:

This is a paragraph with a border.

Border Width Property

The border-width property is used to set the width of an element's border. It can be applied to any HTML element. The syntax for the border-width property is as follows:

<element style="border-width: top right bottom left;">

The top, right, bottom, and left parameters specify the width of the border on each side of the element. They can be set to a value in pixels, ems, or other units, or to one of the following values: thin, medium, or thick.

For example, the following code sets a 2-pixel wide border on the top and bottom of a paragraph element:

<p style="border-width: 2px 0;">This is a paragraph with a border.</p>

The result will look like this:

This is a paragraph with a border.

Border Style Property

The border-style property is used to set the style of an element's border. It can be applied to any HTML element. The syntax for the border-style property is as follows:

<element style="border-style: top right bottom left;">

The top, right, bottom, and left parameters specify the style of the border on each side of the element. They can be set to one of the following values: solid, dotted, dashed, double, groove, ridge, inset, or outset.

For example, the following code sets a dotted border on all sides of a paragraph element:

<p style="border-style: dotted;">This is a paragraph with a border.</p>

The result will look like this:

This is a paragraph with a border.

Border Color Property

The border-color property is used to set the color of an element's border. It can be applied to any HTML element. The syntax for the border-color property is as follows:

<element style="border-color: top right bottom left;">

The top, right, bottom, and left parameters specify the color of the border on each side of the element. They can be set to a color name, RGB value, or hexadecimal value.

For example, the following code sets a red border on all sides of a paragraph element:

<p style="border-color: red;">This is a paragraph with a border.</p>

The result will look like this:

This is a paragraph with a border.

Border Radius Property

The border-radius property is used to create rounded corners on an element's border. It can be applied to any HTML element. The syntax for the border-radius property is as follows:

<element style="border-radius: top-left top-right bottom-right bottom-left;">

The top-left, top-right, bottom-right, and bottom-left parameters specify the radius of the border on each corner of the element. They can be set to a value in pixels, ems, or other units.

For example, the following code sets a paragraph element with rounded corners:

<p style="border: 2px solid black; border-radius: 10px;">This is a paragraph with rounded corners.</p>

The result will look like this:

This is a paragraph with rounded corners.

Conclusion

CSS border properties are a powerful tool for enhancing the appearance of HTML elements. By using the border property, you can set the width, style, and color of an element's border. The border-width, border-style, and border-color properties allow you to set these values individually. The border-radius property allows you to create rounded corners on an element's border. By using these properties, you can create visually appealing and professional-looking web pages.

References

Activity