How to Add Border in CSS?

In CSS, the border property is used to add a border to an element. The border property can be used to set the width, style, and color of the border. Here is the syntax for the border property:

Syntax

border: width style color;

• The width parameter specifies the width of the border. The width can be specified in pixels (e.g. 1px), ems (e.g. 1em), or using one of the following keywords: thin, medium, or thick.
• The style parameter specifies the style of the border. The possible values for the style are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset.
• The color parameter specifies the color of the border. The color can be specified using a named color (e.g. red), a hexadecimal color code (e.g. #ff0000), or a RGB/RGBA color value (e.g. rgb(255, 0, 0) or rgba(255, 0, 0, 1)).

Examples

Here is an example of how to use the border property:

.my-element {
  border: 1px solid red;
}

In this example, we set the width of the border to 1px, the style to solid, and the color to red.

The border property is supported by all modern browsers. However, older versions of Internet Explorer may not support all the possible values for the border property. It is recommended to always include vendor prefixes for maximum compatibility with older browsers. Here is an example with vendor prefixes:

.my-element {
  border: 1px solid red;
  -webkit-border: 1px solid red;
  -moz-border: 1px solid red;
  -ms-border: 1px solid red;
  -o-border: 1px solid red;
}

In this example, we include vendor prefixes for the border property to ensure maximum compatibility with older browsers.

Add Top Border in CSS

To add a border to the top of an element in CSS, you can use the border-top property. Here is an example:

.my-element {
  border-top: 1px solid black;
}

This will add a 1 pixel solid black border to the top of the element with the my-element class. You can adjust the width, style, and color of the border to your liking. Here is an example with a different border style:

.my-element {
  border-top: 3px dashed red;
}

This will add a 3 pixel dashed red border to the top of the element with the my-element class.

Here is an example of the output you can expect when using the border-top property in CSS:

<div class="my-element">
  This is my element.
</div>

.my-element {
  border-top: 1px solid black;
}

Add Bottom Border in CSS

To add a border to the bottom of an element in CSS, you can use the border-bottom property. Here is an example:

.my-element {
  border-bottom: 1px solid black;
}

This will add a 1 pixel solid black border to the bottom of the element with the my-element class. You can adjust the width, style, and color of the border to your liking. Here is an example with a different border style:

.my-element {
  border-bottom: 3px dashed red;
}

This will add a 3 pixel dashed red border to the bottom of the element with the my-element class.

Here is an example of the output you can expect when using the border-bottom property in CSS:

<div class="my-element">
  This is my element.
</div>

.my-element {
  border-bottom: 1px solid black;
}

This will create a div element with a black border at the bottom.

Add Border to Left Side Only

To add a border to the left of an element in CSS, you can use the border-left property. Here is an example:

.my-element {
  border-left: 1px solid black;
}

This will add a 1 pixel solid black border to the left of the element with the my-element class. You can adjust the width, style, and color of the border to your liking. Here is an example with a different border style:

.my-element {
  border-left: 3px dashed red;
}

This will add a 3 pixel dashed red border to the left of the element with the my-element class.

Here is an example of the output you can expect when using the border-left property in CSS:

<div class="my-element">
  This is my element.
</div>

.my-element {
  border-left: 1px solid black;
}

This will create a div element with a black border on the left side.

Add Border to Right Side Only

To add a border to the right of an element in CSS, you can use the border-right property. Here is an example:

.my-element {
  border-right: 1px solid black;
}

This will add a 1 pixel solid black border to the right of the element with the my-element class. You can adjust the width, style, and color of the border to your liking. Here is an example with a different border style:

.my-element {
  border-right: 3px dashed red;
}

This will add a 3 pixel dashed red border to the right of the element with the my-element class.

Create Rounded Border in CSS

To create a rounded border in CSS, you can use the border-radius property. This property allows you to specify the radius of the rounded corners of an element's border. The border-radius property is specified using the following syntax:

border-radius: radius;

• The radius parameter specifies the radius of the rounded corners. The radius can be specified in pixels (e.g. 10px), ems (e.g. 1em), or using a percentage value (e.g. 50%).

Here is an example of how to use the border-radius property:

.my-element {
  border: 1px solid black;
  border-radius: 10px;
}

In this example, we set the border-radius property to 10px, which will create rounded corners with a radius of 10 pixels. You can adjust the value of the border-radius property to create the desired degree of rounding for the corners.

Here is an example of the output you can expect when using the border-radius property in CSS:

<div class="my-element">
  This is my element.
</div>

.my-element {
  border: 1px solid black;
  border-radius: 10px;
}

This will create a div element with a black border and rounded corners with a radius of 10 pixels.

Related:

• Making a Rounded Border Around an Image with CSS
• Box Shadow CSS Generator