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



CSS Borders

CSS borders are used to add a border around an HTML element. Borders can be used to enhance the appearance of an element and to separate it from other elements on the page. In this tutorial, we will discuss the different types of borders that can be applied using CSS.

Brief Explanation of CSS Borders

CSS borders can be applied to any HTML element using the border property. The border property is a shorthand property that allows you to set the width, style, and color of the border in one declaration. The syntax for the border property is as follows:

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

The width of the border can be set using a length value, such as pixels or ems, or using one of the following keywords:

  • thin
  • medium
  • thick

The style of the border can be set using one of the following values:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

The color of the border can be set using a color value, such as a hex code or a named color.

Code Examples

Here are some examples of how to apply borders to HTML elements using CSS:

Example 1: Simple Border

In this example, we will apply a simple border to a paragraph element:

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

The result will be a paragraph element with a 1 pixel solid black border:

This is a paragraph with a border.

Example 2: Rounded Border

In this example, we will apply a rounded border to a div element:

<div style="border: 1px solid black; border-radius: 10px;">This is a div with a rounded border.</div>

The result will be a div element with a 1 pixel solid black border and a 10 pixel border radius:

This is a div with a rounded border.

Example 3: Image Border

In this example, we will apply an image border to an image element:

<img src="example.jpg" style="border: 10px solid url(border.png);">

The result will be an image element with a 10 pixel solid border using an image file as the border:

Conclusion

CSS borders are a simple yet powerful way to enhance the appearance of HTML elements. By using the border property, you can set the width, style, and color of the border in one declaration. You can also use other CSS properties, such as border-radius and border-image, to create more complex borders. With a little creativity, you can use CSS borders to make your web pages stand out.

References

Activity