CSS border property

CSS (Cascading Style Sheets) border property is used to define the border of an element in a web page. Borders can enhance the appearance of elements by providing visual separation and distinction. The border property allows you to set the width, style, and color of the border.

selector { border: [border-width] [border-style] [border-color]; }
Key Border Properties:


Specifies the width of the border. It can be set in pixels, ems, rems, or any other valid CSS length unit. You can also specify the width individually for each side (top, right, bottom, left) using border-top-width, border-right-width, border-bottom-width, and border-left-width.

border-width: 2px; /* 2 pixels thick border */ border-width: 10%; /* 10% of element width */


Specifies the style of the border. It can be solid, dashed, dotted, double, groove, ridge, inset, outset, etc. You can also specify the style individually for each side using border-top-style, border-right-style, border-bottom-style, and border-left-style.

border-style: dotted; /* Dotted border */ border-style: double; /* Double border */


Specifies the color of the border. You can use color names, hexadecimal, RGB, RGBA, HSL, or HSLA values. Like width and style, you can also specify the color individually for each side using border-top-color, border-right-color, border-bottom-color, and border-left-color.

border-color: blue; /* Blue border */ border-color: #F00; /* Red border (hexadecimal) */

Shorthand Property

border: Combines all three properties into one for convenience. Use this when all sides have the same style, width, and color. Example:

border: 1px solid black; /* 1px black solid border on all sides */

Individual Border Control

CSS also allows you to target specific sides of an element's border using properties like: border-top, border-right, border-bottom, border-left. These properties accept the same values as the individual border-width, border-style, and border-color properties. Example:

border-top: 2px dashed green; /* Top border: 2px green dashed */ border-left: none; /* Remove left border */

Now, let's look at some examples:

Simple Border

div { border: 2px solid #000; }

This will create a black solid border with a width of 2 pixels around all sides of the div element.

Different Border Sides

div { border-top: 2px dotted #f00; border-right: 4px dashed #0f0; border-bottom: 6px double #00f; border-left: 8px groove #ff0; }

This will create different styles of borders on each side of the div element.

Rounded Border

div { border: 2px solid #000; border-radius: 10px; }

This will create a black solid border with a width of 2 pixels and rounded corners of 10 pixels radius for the div element.

Border with Transparent Color

div { border: 2px solid rgba(255, 0, 0, 0.5); }

This will create a red solid border with a width of 2 pixels and transparency of 50% for the div element.

Button with a thick blue border

button { border: 5px solid blue; padding: 10px 20px; }

Image with a dotted green border and rounded corners

img { border: 3px dotted green; border-radius: 10px; padding: 5px; }

Table with different border styles for header and body rows

table { border-collapse: collapse; } th { border: 1px solid black; padding: 5px; } td { border: 1px dashed gray; padding: 5px; }
Additional Customization:

Customizing Border-Radius

By adjusting the border-radius property, you can round the corners of elements in CSS. This feature allows for creating softer, more visually appealing designs, adding a touch of modernity and elegance to various elements such as buttons, cards, or containers.

Border-Collapse for Merging Table Cell Borders

The border-collapse property in CSS enables the merging of borders between adjacent table cells, creating a seamless appearance. This property is particularly useful for styling complex table layouts, ensuring consistency and improving readability by eliminating unnecessary visual clutter caused by individual cell borders.

Utilizing Pseudo-classes for Interactive Border Styling

Pseudo-classes like :hover and :active in CSS offer dynamic control over border styles based on user interaction. By applying different border properties within these pseudo-classes, designers can enhance the interactivity of elements, providing visual feedback to users as they interact with the webpage, improving user experience and engagement.


The CSS border property allows developers to define the visual appearance of borders around HTML elements on web pages. It enables customization of border width, style, and color, providing flexibility in creating visually appealing designs. By controlling these properties, developers can enhance the separation, distinction, and overall aesthetics of elements within their web layouts.