CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Borders

❮ Previous Next ❯

CSS Borders: Outlining Elements

CSS borders define the outline around an HTML element, providing visual separation and emphasis within a webpage layout.

You can try different types of borders here:

Simple Border Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .simple-border {
            border: 2px solid black;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="simple-border">
        I am a div element with a solid black border!
    </div>
</body>
</html>

In this example:

Syntax:

element {
    border: 1px solid black;
}

CSS Border Properties

CSS provides several properties to control and customize borders:

Property Description
border-style Determines the type of border (e.g., solid, dashed, dotted).
border-width Sets the width of the border (in pixels, points, or other units).
border-color Specifies the border color.
border-radius Creates rounded corners for elements.

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

You can target specific sides using:

2. Border Width

You can change the width for each side:

3. Border Color

Colors can also be specified per side:

4. Border Individual Sides

CSS allows you to style each side of a border individually using shorthand properties like border-top or border-bottom, giving extreme 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.

Border Style Description
Dotted Creates a series of dots.
Dashed Forms a dashed line.
Solid Produces a continuous line.
Double Renders two parallel lines.
Groove Creates a 3D grooved effect.
Ridge Creates a 3D ridged effect.
Inset Adds a 3D inset border.
Outset Adds a 3D outset border.
None Removes the border.
Hidden Hides the border.

The following example demonstrates different common border styles using the border-style property in CSS.

Border Styles Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p { padding: 10px; }
        p.dotted {
            border-style: dotted;
        }
        p.dashed {
            border-style: dashed;
        }
        p.solid {
            border-style: solid;
        }
        p.double {
            border-style: double;
        }
    </style>
</head>
<body>
    <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>

In this example:

CSS Border Width

CSS border-width is used to define the thickness of the border around an element. It can be specified in various units like px, pt, cm, or by using predefined values like thin, medium, and thick.

Border Width Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            border-style: solid;
            border-width: 8px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p>This paragraph has an 8px solid border.</p>
</body>
</html>

In this example:

CSS Border Color

CSS border-color is used to define the color of the border. You can set the color using color names, hexadecimal values, or RGB values. If no color is specified, the border will inherit the text color of the element itself.

Border Color Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            border-style: solid;
            border-width: 3px;
            border-color: red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p>This paragraph has a red border.</p>
</body>
</html>

In this example:

Border Radius Property

The CSS border-radius property is used to round the corners of an element's border, giving it a more visually pleasing and smoother appearance.

Border Radius Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            border-style: solid;
            text-align: center;
            background: navy;
            color: white;
            border-radius: 20px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Rounded Corners</h1>
</body>
</html>

In this example:

Practical Use Cases of CSS Borders

CSS borders are commonly used in the following scenarios:

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

Exercise

?

Which CSS property MUST be defined for the border to appear on the screen, regardless of its color or width?

❮ Previous Next ❯