The border-style shorthand CSS property sets the line style for all four sides of an element's border.

border = <line-width> || <line-style> || <color> <line-width> = <length [0,∞]> | thin | medium | thick <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ... div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; } ... This page was last modified on ⁨Dec 5, 2025⁩ by MDN contributors.

The line style of the border. See border-style. border-block-style = <'border-top-style'>{1,2} <border-top-style> = <line-style> <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Note: The specification doesn't define how borders of different styles connect in the corners. ... <section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: white; } ... /* 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;

The **`border-style`** [shorthand](/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets the line style for all four sides of an element's border.

The border-style shorthand CSS property sets the line style for all four sides of an element's border.

Note: The specification doesn't define how borders of different styles connect in the corners. ... <section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: white; } ... /* Keyword values */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; /* Global values */ border-left-style: inherit; border-left-style: initial; border-left-style: revert; border-left-style: revert-layer; border-left-style: unset;

The border-style property is a shorthand property for setting the line style for all four sides of the element´s border.

Defaults to `none` if absent. See {{Cssxref("border-style")}}. - {{cssxref("&lt;color&gt;")}} - : Sets the color of the border. Defaults to `currentColor` if absent. See {{Cssxref("border-color")}}. · ## Description · · As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial_value).

Note: The specification doesn't define how borders of different styles connect in the corners. ... <section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: white; } ... /* Keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* Global values */ border-top-style: inherit; border-top-style: initial; border-top-style: revert; border-top-style: revert-layer; border-top-style: unset;

The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or ...

This property is a shorthand for the following CSS properties: ... /* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / t

The line style of the border. See border-style. border-block-end-style = <line-style> <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

CSS Examples: border · Examples · Styles Used · black { padding: 10px; width: 300px; border: 1px solid #000; } · MDC Documentation -- CSS:border

The border-bottom-style CSS property sets the line style of an element's bottom border.

p.one {border-style: dotted solid dashed double;} p.two {border-style: dotted solid dashed;} p.three {border-style: dotted solid;} p.four {border-style: dotted;} Try it Yourself » ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected] · If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected] · HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial

The CSS border properties allow you to specify the style, width, and color of an element's border.

The CSS backgrounds and borders module provides properties for adding backgrounds, borders, rounded corners, and box shadows to elements. You can add different types of border styles, including borders made of images of any image type, from raster images to CSS gradients.