Premium CSS Course

CSS Borders

Borders are an essential part of web design, providing structure and separation between elements. CSS allows you to control various aspects of borders, such as their color, width, style, and radius, offering great flexibility in design.

Basic Border Properties

In CSS, borders are controlled using three primary properties:

All three properties can be combined using the border shorthand property:


        div {
            border: 2px solid #000000; /* 2px wide solid black border */
        }

This creates a 2px solid black border around the element.

Border Style

The border-style property determines the appearance of the border. Here are the common border styles:


        div {
            border-style: dashed; /* Dashed border */
        }

Individual Border Sides

You can set borders individually for each side of an element:


        div {
            border-top: 5px solid #ff0000; /* Red top border */
            border-right: 2px solid #00ff00; /* Green right border */
        }

This example creates a red top border and a green right border for the div element.

Border Radius

The border-radius property allows you to create rounded corners on an element. You can specify one or more values for each corner:


        div {
            border-radius: 10px; /* All corners have a 10px radius */
        }
    

        div {
            border-radius: 10px 20px 30px 40px; /* Top-left, top-right, bottom-right, bottom-left */
        }

In the second example, the corners are rounded with different radii for each corner.

Advanced Border Radius (Elliptical Borders)

You can create elliptical borders by specifying two values for the border-radius property:


        div {
            border-radius: 50% 25%; /* Horizontal and vertical radii */
        }

This creates an elliptical border effect, with the horizontal radius being 50% and the vertical radius being 25%.

Shorthand for Border Properties

You can combine all border properties into one shorthand property. The general syntax is:


        border: [border-width] [border-style] [border-color];

For example:


        div {
            border: 3px solid #ff6347; /* 3px solid tomato-colored border */
        }

Example of Full Border Styling

Here’s an example combining different border properties:


        div {
            border: 3px dashed #ff6347; /* Dashed tomato-colored border */
            border-radius: 15px; /* Rounded corners */
            padding: 10px;
            background-color: #f9f9f9;
        }

This example creates a dashed, rounded-border effect with some padding and a light background color.

Best Practices for Borders