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>

Browser Compatibility

The border-style property is well-supported across all major web browsers:

Chrome: Supported since version 1.0.
Edge: Supported since version 12.0.
Firefox: Supported since version 1.0.
Internet Explorer: Supported since version 4.0.
Opera: Supported since version 3.5.
Safari: Supported since version 1.0.

This ensures consistent rendering of border styles across different platforms.

FAQs

What is the `border-style` property in CSS?

The border-style property defines the line style of an element’s border, enhancing its visual appeal.

What styles can be applied using `border-style`?

none: No border.
hidden: No border unless a background image is added.
dotted: A series of dots.
solid: A solid line.
dashed: A series of dashes.
double: Two parallel lines.
groove: A 3D grooved border.
ridge: A 3D ridged border.
inset: A 3D inset border.
outset: A 3D outset border.

How do I apply different styles to each side using `border-style`?

Specify up to four values:

border-style: solid dotted dashed double;: Top, right, bottom, left.
border-style: dotted solid;: Top and bottom, left and right.
border-style: hidden double dashed;: Top, left and right, bottom.

Can I use `border-style` without defining width and color?

Yes, but the border won’t be visible without a defined width or color.

What happens if `border-style` is set to `none`?

Setting border-style to none hides the border, even if width and color are specified.

These FAQs provide a quick reference for using the border-style property effectively in your web designs.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-border-left-color.png

CSS Border-Left-Color Customize Left Border Learn how to use the CSS border-left-color property to customize the color of an element's left border. Explore available options including named colors, hex values, and global values.

css_property_cover/css-property-border-left-width.png

CSS Border-Left-Width Mastering Web Design Learn how to use the CSS border-left-width property to control the width of an element's left border. Explore available options such as pixels, ems, vmax, and keywords like thin, medium, and thick.

css_property_cover/css-property-border-top-width.png

CSS Border-Top-Width Enhance Your Design Learn about the CSS border-top-width property. Use it to control the thickness of the top border of elements. Available options include keywords like thin, medium, thick, and length units like px, em, rem, vw, and vh.

css_property_cover/css-property-border-bottom-style.png

CSS border-bottom-style Enhance Web Design with Stylish Borders Learn how to use CSS border-bottom-style to enhance your web design. Choose from various styles like none, dotted, dashed, solid, double, groove, ridge, inset, and outset to create visually appealing designs.

css_property_cover/css-property-border-left.png

CSS border-left Customize Left Borders Easily Learn how to use the CSS border-left property to customize the left border of elements. Discover available options for width, style, and color.

css_property_cover/css-property-border-left-style.png

CSS border-left-style Customize Left Border Styles Learn about the CSS border-left-style property. Customize the left border of elements with various styles like solid, dotted, dashed, and more. Enhance your web design.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS Border-Style Enhance Your Web Design

Introduction

Specification

Properties

Syntax

Single Value

Two Values

Three Values

Four Values

Global Values

Values

Formal Definition

Initial Value

Applies To

Inherited

Computed Value

Animation Type

Formal Syntax

Examples

HTML

Explanation

Result

HTML

Explanation

Result

Use Cases

1. Styling Buttons

2. Creating Borders Around Images

3. Styling Form Inputs

4. Creating Visually Appealing Tables

Browser Compatibility

FAQs

What is the border-style property in CSS?

What styles can be applied using border-style?

How do I apply different styles to each side using border-style?

Can I use border-style without defining width and color?

What happens if border-style is set to none?

Talk with CEO

What is the `border-style` property in CSS?

What styles can be applied using `border-style`?

How do I apply different styles to each side using `border-style`?

Can I use `border-style` without defining width and color?

What happens if `border-style` is set to `none`?