CSS Borders

A CSS border is a line that surrounds an HTML element, providing a visual separation between the element and its surroundings. Borders can be styled in various ways, including adjusting their width, color, and style. The basic properties used to define borders in CSS are border-width, border-style, and border-color.

Here, We covered CSS borders, including styling options, practical use cases, and best practices.

Syntax

The simplest way to add a border to an element is by using the border shorthand property. Here’s the basic syntax:

element {
  border: 1px solid black;
}

In this example, the border is defined as 1 pixel wide, solid in style, and black in color.

CSS Border Properties

CSS provides several properties to control and customize borders:

Ways to Style Border in CSS

The CSS border property enables the styling of an element’s border by setting its width, style, and color, allowing for customizable visual boundaries in web design.

1. Border Style

• CSS border-top style Property
• border-right-style Property
• border-bottom-style Property
• border-left-style Property

2. Border Width

• border-top-width Property
• border-right-width Property
• border-bottom-width Property
• border-left-width Property

3. Border Color

• border-top-color Property
• border-right-color Property
• border-bottom-color Property
• border-left-color Property

4. Border individual sides

CSS allows you to style each side of a border individually, giving flexibility in design.

5. Border Radius Property

The border-radius property allows you to round the corners of an element, creating smoother edges.

Common Border Styles

The border-style property specifies the type of border. None of the other border properties will work without setting the border style. 

Example: Using Different Border Styles

In this example Paragraphs feature varied border styles (dotted, dashed, solid, double) via CSS classes (.dotted, .dashed, .solid, .double). This enhances visual presentation, demonstrating distinct styles for each paragraph.

<!DOCTYPE html>
<html>

<head>
    <style>
        p.dotted {
            border-style: dotted;
        }

        p.dashed {
            border-style: dashed;
        }

        p.solid {
            border-style: solid;
        }

        p.double {
            border-style: double;
        }
    </style>
</head>

<body>
    <h2>The border-style Property</h2>

    <p>Geeksforgeeks</p>


    <p class="dotted">A dotted border.</p>

    <p class="dashed">A dashed border.</p>

    <p class="solid">A solid border.</p>

    <p class="double">A double border.</p>

</body>

</html>

Output: 

CSS Border Width

Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium, and thick.

Example:

In this example Two paragraphs have an 8-pixel solid border defined by CSS. This border enhances visual separation, and its thickness can be adjusted using the `border-width` property for a desired effect.

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border-style: solid;
            border-width: 8px;
        }
    </style>
</head>

<body>
    <p>
        Geeksforgeeks
    </p>
    <p>
        Border properties
    </p>
</body>

</html>

Output: 

CSS Border Color

This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.

Example:

In this example Two paragraphs have a solid red border set with the `border-color` property, enhancing visual distinction. The border color can be customized by specifying different color values.

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border-style: solid;
            border-color: red
        }
    </style>
</head>

<body>
    <p>
        Geeksforgeeks
    </p>
    <p>
        Border properties:color
    </p>
</body>

</html>

Output: 

CSS Border individual sides

Using border property, we can provide width, style, and color to all the borders separately for that we have to give some values to all sides of the border.

Syntax: 

border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;

Example:

In this example, A single <h2> heading features a dotted top border set with the `border-top-style` property. CSS allows various border styles to enhance element appearance.

<!DOCTYPE html>
<html>

<head>
    <style>
        h2 {
            border-top-style: dotted;
        }
    </style>
</head>

<body>
    <h2>Welcome to GeeksforGeeks</h2>
</body>

</html>

Output:

Border radius property

The CSS border-radius property rounds the corners of an element’s border, creating smoother edges, with values specifying the curvature radius.

Syntax:

border-radius: value;

Example :

In this example A single <h1> heading has a solid border, centered text (using `text-align`), a green background, and rounded corners (using `border-radius`), creating a visually appealing header element.

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            border-style: solid;
            text-align: center;
            background: green;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>

Output:

Practical Use Cases of CSS Borders

CSS borders are commonly used in the following scenarios:

• Styling Buttons : Borders enhance button designs, making them more visually appealing and clickable.
• Creating Dividers : Borders can act as separators between content sections, providing clear visual breaks.
• Customizing Images : Apply borders around images to frame them, making thumbnails stand out.
• Designing Navigation Menus : Borders can define the boundaries of navigation links or items

CSS Borders Supported Browsers

• Google Chrome
• Edge 
• Firefox
• Opera
• Safari

Note: Older versions of Internet Explorer may not fully support advanced features like border-radius or certain border styles (e.g., groove, ridge), so it’s advisable to test your design across different browsers

CSS Borders – FAQs

How do I control borders in CSS?

You can control borders using properties like border-width, border-style, border-color, and border-radius for customization.

Can you add 2 borders in CSS?

Yes, you can add two borders using a combination of outline and border, or by nesting elements with different borders.

How many border styles are in CSS?

CSS offers 10 border styles, including solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden.

What is CSS outline?

The outline property in CSS adds a line around an element without affecting its size or layout, often used for accessibility.

How to blur a border in CSS?

You can blur a border using the box-shadow property with a blur radius, such as box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

S

SrishtiGoel

Follow

Improve