CSS Border-Right-Style Customize Your Right Border

Introduction

The border-right-style property in CSS lets you define the style of the right border of an element. This is part of the broader CSS border properties that help you control the appearance of borders. By setting the border-right-style, you can customize the visual style of the right border, making it solid, dashed, dotted, or any other available style. This enhances the design flexibility and helps in creating visually appealing web pages.

Syntax

The border-right-style property in CSS is specified using a single keyword value that defines the style of the right border. The syntax is straightforward and supports various predefined styles. Here is the basic structure:

/* Keyword values */
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/* Global values */
border-right-style: inherit;
border-right-style: initial;
border-right-style: revert;
border-right-style: revert-layer;
border-right-style: unset;

Explanation

• Keyword values: These define the specific style of the right border.
  • none: No border is displayed.
  • hidden: The border is invisible, similar to none, but it can be used in border conflict resolution for table elements.
  • dotted: The border is a series of dots.
  • dashed: The border is a series of short dashes.
  • solid: The border is a single solid line.
  • double: The border is two solid lines with a space between them.
  • groove: The border appears as if it is carved into the page.
  • ridge: The border appears as if it is coming out of the page.
  • inset: The border makes the element appear recessed.
  • outset: The border makes the element appear raised.
• Global values: These are used to control inheritance and resetting.
  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its default value.
  • revert: Resets the property to the browser’s default styling.
  • revert-layer: Resets the property to the browser’s default styling for the current cascade layer.
  • unset: Acts as either inherit or initial, depending on whether the property is inherited or not.

Property Values

The border-right-style property in CSS supports a variety of values that define the visual style of the right border of an element. Each value offers a unique appearance, allowing web developers to customize the border according to their design needs. Here are the values and their descriptions:

Keyword Values

• none: This is the default value. It makes the width of the right border zero, effectively making it invisible.
• hidden: Similar to none, this value makes the right border invisible. However, it can be used in border conflict resolution for table elements.
• dotted: This value creates a border composed of a series of dots.
• dashed: This value creates a border composed of a series of short dashes.
• solid: This value creates a single, solid line border.
• double: This value creates a border with two solid lines, with a space between them. The total width of the border is the sum of the widths of the two lines and the space between them.
• groove: This value creates a border that appears to be carved into the page, giving it a 3D effect.
• ridge: This value creates a border that appears to be coming out of the page, also giving it a 3D effect.
• inset: This value creates a border that makes the element appear recessed, as if it is deeply fixed on the screen.
• outset: This value creates a border that makes the element appear raised, as if it is coming out of the screen.

Global Values

• inherit: This value makes the border-right-style property inherit its value from the parent element.
• initial: This value sets the property to its default value, which is none.
• revert: This value resets the property to the browser’s default styling.
• revert-layer: This value resets the property to the browser’s default styling for the current cascade layer.
• unset: This value acts as either inherit or initial, depending on whether the property is inherited or not.

Examples

To better understand how the border-right-style property works in practice, let’s explore some examples. These examples demonstrate different styles that can be applied to the right border of an element.

Example: border-right-style: none

This example demonstrates how to remove the right border style while keeping other borders intact.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: none;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: hidden

This example shows how to make the right border invisible.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: hidden;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: dotted

This example demonstrates how to create a dotted right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: dotted;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: dashed

This example shows how to create a dashed right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: dashed;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: solid

This example demonstrates how to create a solid right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: solid;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: double

This example shows how to create a double right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: double;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: groove

This example demonstrates how to create a grooved right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            border: 10px;
            border-style: solid;
            border-right-style: groove;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: inset

This example shows how to create an inset right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            border: 10px;
            border-style: solid;
            border-right-style: inset;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: outset

This example demonstrates how to create an outset right border.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style property</title>
    <style>
        h1 {
            border: 10px;
            border-style: solid;
            border-right-style: outset;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: border-right-style: inherit

This example shows how to inherit the right border style from a parent element.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style Property</title>
    <style>
        body {
            border-right-style: dashed;
        }
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: inherit;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

Example: Table with Different Border Styles

This example demonstrates various border styles applied to the right border of table cells.

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define look of the table */
table {
  border-width: 2px;
  background-color: #52e385;
}
tr, td {
  padding: 3px;
}

/* border-right-style example classes */
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}

In this example, each table cell has a different border-right-style applied, showcasing various border styles.

Browser Compatibility

The border-right-style property is widely supported across all modern web browsers. This universal support ensures that web developers can confidently use this property to style the right borders of elements without worrying about compatibility issues. Here is a summary of the browser support for the border-right-style property:

Browser Support Table

Notes on Browser Support

• Google Chrome: The border-right-style property has been supported since the initial release of Google Chrome.
• Mozilla Firefox: Firefox has supported this property since its first version.
• Microsoft Edge: Edge has supported this property since version 12.0.
• Internet Explorer: Internet Explorer has supported this property since version 5.5.
• Opera: Opera has supported this property since version 9.2.
• Safari: Safari has supported this property since its initial release.

Ensuring Compatibility

While the border-right-style property is well-supported across all major browsers, it is always a good practice to test your web designs in different browsers to ensure consistency. This is particularly important for web projects that need to support older browser versions.

Example of Cross-Browser Testing

To ensure that your border-right-style implementation works across all browsers, you can use the following example and test it in different browsers:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style Property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: dashed;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

By testing this example in multiple browsers, you can verify that the border-right-style property behaves as expected across different platforms and versions.

FAQs

What does the border-right-style property do in CSS?

The border-right-style property in CSS sets the style of the right border of an element. It allows you to define whether the right border is solid, dashed, dotted, double, or another style. This property is crucial for customizing the appearance of borders and enhancing the visual design of web pages.

What values can be used with border-right-style?

The border-right-style property supports a variety of values, including:

• none: No border is displayed.
• hidden: The border is invisible, similar to none, but can be used in border conflict resolution for table elements.
• dotted: The border is a series of dots.
• dashed: The border is a series of short dashes.
• solid: The border is a single solid line.
• double: The border is two solid lines with a space between them.
• groove: The border appears to be carved into the page, giving it a 3D effect.
• ridge: The border appears to be coming out of the page, also giving it a 3D effect.
• inset: The border makes the element appear recessed, as if it is deeply fixed on the screen.
• outset: The border makes the element appear raised, as if it is coming out of the screen.
• inherit: The property inherits its value from the parent element.

How do I remove the right border style while keeping others intact?

You can set the border-right-style to none while leaving other border styles unchanged. For example:

border-right-style: none;

This will hide the right border without affecting the top, bottom, or left borders.

Can I combine border-right-style with other border properties?

Yes, you can combine border-right-style with border-right-width and border-right-color for full control over the appearance of the right border. For example:

border-right: 2px dashed red;

This applies a 2px red dashed border on the right side.

What happens if border-right-style is not specified?

If border-right-style is not specified, the right border won’t be visible even if border width and color are set. The style is essential for the border to render. The default value is none.

Is the border-right-style property supported in all browsers?

Yes, the border-right-style property is widely supported across all modern web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Internet Explorer, Opera, and Safari. This ensures that you can confidently use this property to style the right borders of elements without worrying about compatibility issues.

How can I test border-right-style in different browsers?

You can test the border-right-style property by creating a simple HTML and CSS example and viewing it in different browsers. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS border-right-style Property</title>
    <style>
        h1 {
            color: green;
            text-align: center;
            border: 5px solid black;
            border-right-style: dashed;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
</body>
</html>

By testing this example in multiple browsers, you can verify that the border-right-style property behaves as expected across different platforms and versions.