border-style

Definition

The border-style property is a CSS property that sets the style of an element's borders. It can be used to set the style of all four borders of an element (top, right, bottom, and left) or for individual sides.

Examples

Setting a solid border for an element:

div {
    border-style: solid;
}

Setting a dotted border for an element:

p {
    border-style: dotted;
}

Setting a dashed border for an element:

h1 {
    border-style: dashed;
}

Setting a double border for an element:

.box {
    border-style: double;
}

Setting a groove border for an element:

.container {
    border-style: groove;
}

Setting a ridge border for an element:

.image-container {
    border-style: ridge;
}

Setting a inset border for an element:

.form-control {
    border-style: inset;
}

Setting a outset border for an element:

.button {
    border-style: outset;
}

Setting different border styles for different sides of an element:

.my-element {
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: double;
    border-left-style: groove;
}

Values

Best Practices

• Use the border-style property in conjunction with the border-width and border-color properties to create a visible border.
• Avoid using the border-style property with a value of none to hide borders as it may lead to confusion for users. Instead, use border-width: 0 or other CSS techniques like visibility: hidden or opacity: 0 to hide borders.
• Use standard border styles such as solid, dotted, dashed, and double that are widely supported across all browsers.
• Be consistent with the border styles used throughout your website or application. This will create a cohesive look and feel.
• Be mindful of accessibility, be sure to use a contrasting border color for elements with a low-contrast background color to make them more visible for users with low vision.
• Test your border styles with different screen sizes and resolutions to ensure that they look good and are easy to read on all devices.
• Use browser-specific prefixes when using the less-supported border styles like groove, ridge, inset and outset
• Avoid using border-style: none; in conjunction with border-width or border-color, as it does not make any sense.
• Use border styles that are appropriate for the context and content of your element, for example, use dashed for input fields or dotted for sections.

Browser Compatibility

Some of the values of the border-style property may not be supported by all browsers, for example, groove, ridge, inset, and outset are not widely supported. If you need to ensure that your border styles look the same across all browsers, you should test them in different browsers and browser versions to ensure compatibility.