borders

CSS Border Properties

Basic Border

The border property is a shorthand for setting the width, style, and color of a border in one line.

Example of Basic Border: 2px solid #3498db

The border-color property sets the color of the border. You can specify a color for all sides or set a different color for each side.

Example of Border Color: #e74c3c

The border-radius property creates rounded corners. You can specify the radius for all corners or set different values for each corner.

Example of Border Radius: 10px

The border-style property defines the style of the border. Common styles include solid, dashed, dotted, and double.

Example of Dashed Border

Example of Double Border

CSS allows you to set borders individually on each side (top, right, bottom, left). For example, you can use border-top, border-right, etc.

Example of Top Border Only

When setting borders, you can combine border-width, border-style, and border-color in a shorthand property like this:

border: 3px dotted #3498db;