rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Border-Style Enhance Your Web Design

Discover the css border-style property to enhance your web design.

Explore available options like solid, dotted, dashed, and more to create visually appealing borders.

Introduction

The border-style property in CSS is a handy tool for setting the line style for all four sides of an element’s border. It’s great for web design because it lets you control how borders look, making your elements more appealing. This guide will help you understand and use the border-style property effectively, from its specification, syntax, values, and examples to its use cases and browser compatibility. Let’s dive in!

Specification

The border-style property is defined in the CSS Backgrounds and Borders Module Level 3. This module gives guidelines on using and implementing border styles effectively. Understanding the specification ensures that you use the property correctly across different browsers.

Properties

The border-style property is a shorthand for setting the border style of an element. It covers the following individual properties:

border-top-style: Sets the top border style.
border-right-style: Sets the right border style.
border-bottom-style: Sets the bottom border style.
border-left-style: Sets the left border style.

Using the border-style shorthand simplifies the process, making your CSS more efficient.

Syntax

The border-style property can be specified with one, two, three, or four values. Here’s the basic syntax:

border-style: value;

Single Value

border-style: solid;

Two Values

border-style: dotted solid;

Three Values

border-style: hidden double dashed;

Four Values

border-style: none solid dotted dashed;

Global Values

border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

Understanding the syntax helps you apply border styles effectively.

Values

The border-style property can take several values:

none: No border.
hidden: No border, but takes priority in table cells.
dotted: Series of rounded dots.
dashed: Series of short dashes.
solid: Single, straight line.
double: Two straight lines.
groove: Carved appearance.
ridge: Extruded appearance.
inset: Embedded appearance.
outset: Embossed appearance.

Global values include inherit, initial, revert, revert-layer, and unset.

Formal Definition

Initial Value

none for all sides.

Applies To

All elements and ::first-letter.

Inherited

Computed Value

As specified for each side.

Animation Type

Discrete.

Formal Syntax

border-style = <line-style>[{1,4}]

<line-style> =
  none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Examples

Here are some examples to demonstrate the border-style property:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Border Style Examples</title>
    <style>
        .border-example {
            height: 80px;
            width: 120px;
            margin: 20px;
            padding: 20px;
            display: inline-block;
            background-color: palegreen;
            border-width: 5px;
            box-sizing: border-box;
        }

        .none {
            border-style: none;
        }

        .hidden {
            border-style: hidden;
        }

        .dotted {
            border-style: dotted;
        }

        .dashed {
            border-style: dashed;
        }

        .solid {
            border-style: solid;
        }

        .double {
            border-style: double;
        }

        .groove {
            border-style: groove;
        }

        .ridge {
            border-style: ridge;
        }

        .inset {
            border-style: inset;
        }

        .outset {
            border-style: outset;
        }
    </style>
</head>
<body>
    <pre class="border-example none">none</pre>
    <pre class="border-example hidden">hidden</pre>
    <pre class="border-example dotted">dotted</pre>
    <pre class="border-example dashed">dashed</pre>
    <pre class="border-example solid">solid</pre>
    <pre class="border-example double">double</pre>
    <pre class="border-example groove">groove</pre>
    <pre class="border-example ridge">ridge</pre>
    <pre class="border-example inset">inset</pre>
    <pre class="border-example outset">outset</pre>
</body>
</html>

Explanation

HTML Structure: Contains <pre> elements with different border styles.
CSS Styling: Defines a base class .border-example for common styles and specific classes for each border style.

Result

You’ll see a series of boxes, each with a different border style, helping you understand the effect of each border-style value.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Border Style Examples</title>
    <style>
        .border-example-multiple {
            height: 80px;
            width: 120px;
            margin: 20px;
            padding: 20px;
            display: inline-block;
            background-color: palegreen;
            border-width: 5px;
            box-sizing: border-box;
        }

        .b1 {
            border-style: dotted solid;
        }

        .b2 {
            border-style: hidden double dashed;
        }

        .b3 {
            border-style: none solid dotted dashed;
        }
    </style>
</head>
<body>
    <pre class="border-example-multiple b1">dotted solid</pre>
    <pre class="border-example-multiple b2">hidden double dashed</pre>
    <pre class="border-example-multiple b3">none solid dotted dashed</pre>
</body>
</html>

Explanation

HTML Structure: Contains <pre> elements with multiple border styles.
CSS Styling: Defines a base class .border-example-multiple for common styles and specific classes for multiple border styles.

Result

You’ll see a series of boxes, each with a different combination of border styles, helping you understand the effect of applying multiple border-style values.

Use Cases

1. Styling Buttons

Buttons can stand out with unique borders. Here’s how to create different border styles for buttons:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Buttons</title>
    <style>
        .button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #4CAF50;
            color: white;
            border-width: 2px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
        }

        .solid-border {
            border-style: solid;
        }

        .dotted-border {
            border-style: dotted;
        }

        .dashed-border {
            border-style: dashed;
        }
    </style>
</head>
<body>
    <button class="button solid-border">Solid Border</button>
    <button class="button dotted-border">Dotted Border</button>
    <button class="button dashed-border">Dashed Border</button>
</body>
</html>

2. Creating Borders Around Images

Adding borders to images can make them stand out. Here’s how:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Images</title>
    <style>
        .image {
            width: 200px;
            height: auto;
            margin: 20px;
            border-width: 3px;
        }

        .solid-border {
            border-style: solid;
        }

        .dashed-border {
            border-style: dashed;
        }

        .double-border {
            border-style: double;
        }
    </style>
</head>
<body>
    <img src="image1.jpg" class="image solid-border" alt="Solid Border Image">
    <img src="image2.jpg" class="image dashed-border" alt="Dashed Border Image">
    <img src="image3.jpg" class="image double-border" alt="Double Border Image">
</body>
</html>

3. Styling Form Inputs

Form inputs can be styled with borders to improve user experience. Here’s how:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Form Inputs</title>
    <style>
        .input {
            width: 200px;
            padding: 10px;
            margin: 10px;
            border-width: 2px;
            border-radius: 5px;
        }

        .solid-border {
            border-style: solid;
        }

        .dotted-border {
            border-style: dotted;
        }

        .inset-border {
            border-style: inset;
        }
    </style>
</head>
<body>
    <input type="text" class="input solid-border" placeholder="Solid Border">
    <input type="text" class="input dotted-border" placeholder="Dotted Border">
    <input type="text" class="input inset-border" placeholder="Inset Border">
</body>
</html>

4. Creating Visually Appealing Tables

Tables can be enhanced with borders to make the data more readable. Here’s how:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-width: 2px;
        }

        .solid-border {
            border-style: solid;
        }

        .dashed-border {
            border-style: dashed;
        }

        .double-border {
            border-style: double;
        }
    </style>
</head>
<body>
    <table>
        <tr class="solid-border">
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr class="dashed-border">
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr class="double-border">
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </table>
</body>
</html>