CSS Borders

The border of an HTML element is simply one or more lines surrounding its content and padding. Each border has three aspects: its width or thickness, its style or appearance, and its color.

CSS Borders

The CSS border property allows you to specify how the border of the box representing an element should appear. There are three border properties that can be changed –

border-style – specifies whether the border should be solid, dashed, double, or one of the other possible values.
border-color – Specifies the border color. The default value is the element’s foreground color, or the parent element’s color if the element is empty.
border-width – Specifies the width of the border. The default value is medium.

Now, we’ll see examples of how to use these properties.

CSS Border Styles

border-style The property specifies the type of border to display. The following values can be passed to border-style:

Value	Description
none	No border
hidden	Hidden border, same as ‘none’ except for table elements
dotted	A series of dots
dashes	A series of dashes
solid	Single solid line
double	Two parallel lines with a small space between them
groove	A border that appears to be carved into the page
ridge	A border that appears to be slightly raised from the page
inset	A border that appears to be inset into the page
outset	A border that appears to be slightly raised from the page

border-style The property can have up to four values in one statement, and we can specify the styles of the top border, right border, bottom border, and left border.

Example

The following example shows how to correctly display border-style using different values −

<html> 
<body> 
<p style="border-style: none;">No border.</p> 
<p style="border-style: hidden;">Hidden border.</p> 
<p style="border-style: dotted;">Dotted border.</p> 
<p style="border-style: dashed;">Dashed border.</p> 
<p style="border-style: solid;">Solid border.</p> 
<p style="border-style: double;">Double border.</p> 
<p style="border-style: groove;">Groove border.</p> 
<p style="border-style: ridge;">Ridge border.</p> 
<p style="border-style: inset;">Inset border.</p> 
<p style="border-style: outset;">Outset border.</p> 
<p style="border-style: none dashed solid dotted;">A mixed border.</p> 
</body> 
<html>

CSS Border Styles – One Side

CSS provides the following four properties to control the style of each side of an element.

border-top-style
border-right-style
border-bottom-style
border-left-style

Example

Let’s look at an example:

<html> 
<head> 
<style> 
p { 
border-top-style: dotted; border-right-style: solid; 
border-bottom-style: dashed; border-left-style: double; 
border-width:5px; padding: 2em; 
} 
</style> 
</head> 
<body> 
<h2>border-style (single-side)</h2> <p>Different border styles on all the sides.</p> 
</body> 
<html>

CSS Border Width

The border-width property is the next property after the border style and is used to set the width of the border. The following values can be passed to border-width:

Value	Description
thin	A thin border
medium	A medium-width border
thick	A thick border
length	Any length specified in pixels (px), points (pt), centimeters (cm), em, etc.

The border-width property can have up to four values in a single statement, specifying the width of the top, right, bottom, and left borders.

We should declare border-style before declaring border-width; otherwise, the border effect will not be displayed.

Example

Let’s look at an example:

<html> 
<body> 
<h2>border-width with different values</h2> 
<p style="border-style: double; border-width: thin;">Thin width.</p> 
<p style="border-style: dashed; border-width: medium;">Medium width.</p> 
<p style="border-style: solid; border-width: thick;">Thick width.</p> 
<p style="border-style: dotted; border-width: 5px">Specific length width border.</p> 
<p style="border-style: solid; border-width: 2px 4px 5px 10px">Mixed length width border.</p> 
</body> 
</html>

CSS border width –

The border-width property can be set individually for each border. You can pass the same set of values to each side of the border-width property:

border-top-width
border-right-width
border-bottom-width
border-left-width

Example

Let’s look at an example:

<html>

<head>

<style>

p {
border-style: solid; padding: 2em;

border-top-width: thin; border-right-width: thick;

border-bottom-width: medium; border-left-width: 10px;

}

</style>

</head>

<body>

<h2>border-width (single-side)</h2>
<p>Different border styles on all sides.</p>

</body>
<html>

CSS Border Colors

border-color is the third component of border. It sets the color of the border.

The border-color property can have one, two, three, or all four values.
If you don’t declare a color, the default color is the element’s foreground color.
You can pass any type of color value, such as a name, RGB, RGBA, hexadecimal, etc.

You can pass the following values to border-color:

Value	Description
color	The border will be the specified color
transparent	The border will be transparent
inherit	Inherit the value from the parent element

You should declare border-color before declaring border-style, otherwise the border color effect will not be displayed.

The border-color property can have up to four values in a single statement, allowing us to specify the colors of the top, right, bottom, and left borders.

Example

Let’s look at an example of border-color:

<html> 
<body> 
<h2>border-color with different values</h2> 
<p style="border-style: double; border-color: red;">Red Color Border.</p> 
<p style="border-style: dashed; border-color: #40a944;">Green Color Border</p> 
<p style="border-style: solid; border-color: rgb(255,200,0);">Yellow Color Border</p> 
<p style="border-style: dotted; border-color: hsl(0, 50%, 50%)">Brown Color Border</p> 
<p style="border-style: solid; border-color: red blue green yellow">Mixed Color Borders</p>

</body>

</html>

CSS Border Color – Single Side

The border-color property sets the color of each single side of the border independently. You can pass the same value to each side of the border-color:

border-top-color
border-right-color
border-bottom-color
border-left-color

Example

Let’s look at an example:

<html>

<head>

<style>

p {
border-style: solid; padding: 2em;

border-top-color: red; border-right-color: #0000ff;

border-bottom-color: rgb(100,123,111); border-left-color: rgba(50,123,111,0.4) 
} 
</style> 
</head> 
<body> 
<h2>border-color (single-side)</h2> 
<p>Different border colors on all the sides.</p> 
</body> 
</html>

CSS Border – Single-Side Shorthand Properties

If you want to apply all border properties, such as style, width, and color, to only one side of an element, you can use the border shorthand properties.

For example, if you want to apply border properties to the top of an h2 element, you can use the following syntax:

h2 {border-top: thin solid red;}

For each side of any element, there are four shorthand properties:

border-top
border-right
border-bottom
border-left

Example

Let’s look at an example:

<html> 
<head> 
<style> 
p { 
border-top: red dashed thick; 
border-right: solid #0000ff medium;
border-bottom: 10px double rgb(100,123,111);
border-left: rgba(50,123,111,0.4) 15px solid;
padding: 10px;
}
</style>
</head>

<body>

<h2>Shorthand single-side border properties</h2>

<p>Check the borders!!!</p>

</body>

</html>

CSS Borders – Global Shorthand Properties

The simplest shorthand property for creating borders on all sides of an element is border.

Syntax

h2 {border: thick dotted green;}

The above code will add a green, dotted, thick border to all four edges of the h2 element.

Example

Let’s look at an example:

<html> 
<head> 
<style> 
p { 
border: green dashed thick; padding: 10px; 
} 
</style> 
</head> 
<body> 
<h2>Border Shorthand Properties</h2> 
<p>Check out the borders!!!</p> 
</body> 
</html>

But you still have the option to override the border shorthand property with any property passed separately. Please see the following sample code to clarify this:

h2 {border: thin solid gray;} 
h2 {border-bottom-width: 15px;}

The above code will have a thin solid gray border on all sides except the bottom, which has a width of 15px.

Let’s look at an example:

<html> 
<head> 
<style> 
p { 
border: #40a944 dashed thick; border-bottom-width: 15px; padding: 10px; 
} 
</style> 
</head> 
<body> 
<h2>Border Shorthand Property</h2> 
<p>Check the borders!!!</p> 
</body> 
</html>

CSS Rounded Borders

We can add rounded borders to elements using the border-radius property.

Syntax

p {
border: 2px solid #40a944; border-radius: 5px;
}

The above code will add a rounded border around the paragraph element.

Example

<html> 
<head> 
<style> 
p { 
border: 2px solid #40a944; border-radius: 5px; padding:10px; 
} 
</style> 
</head> 
<body> 
<h2>Round Borders</h2> 
<p>Check the borders!!!</p> 
</body> 
</html>

CSS Borders – Inline Elements

Borders can be applied to any inline HTML element. The thickness of the border does not affect the element’s line height. If left and right borders are specified on an inline element, they will offset the text around them.

Syntax

strong {border-top: thin solid green; border-bottom: 5px dotted #ff00ff;}

The above code will apply a green, thin, solid border on the top and a magenta, 5px dotted border on the bottom to the emphasized text in the paragraph.

Example

Let’s look at an example:

<html> 
<head> 
<style> 
strong { 
border-top: thick solid green; border-bottom: 5px dashed #ff00ff; 
background-color: silver; 
} 
</style> 
</head> 
<body> 
<div> 
<h2>Borders on CSS Inline Elements</h2> 
<p>Check <strong>Inline elements with borders</strong>, the rest have no borders.</p> 
</div> 
</body> 
</html>

CSS Borders – Replaced Elements

We can apply borders around replaced elements (such as https://coder-cafe.com/wp-content/uploads/2025/09/images), but applying borders will affect the line height.

Syntax

img {
border: 2em solid #40a944;
}

The above code will apply a 2em wide solid green border around the image.

Example

Let’s look at an example:

<html> 
<head> 
<style> 
img {
border: 1em solid #40a944;
}
</style> 
</head> 
<body> 
<div> 
<p>Check the logo with a border <img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="logo image"> and change the line height. </p> 
</div> 
</body> 
</html>

CSS borders

CSS Borders

CSS Borders

CSS Border Styles

Example

CSS Border Styles – One Side

Example

CSS Border Width

Example

CSS border width –

Example

CSS Border Colors

Example

CSS Border Color – Single Side

Example

CSS Border – Single-Side Shorthand Properties

Example

CSS Borders – Global Shorthand Properties

Syntax

Example

CSS Rounded Borders

Syntax

Example

CSS Borders – Inline Elements

Syntax

Example

CSS Borders – Replaced Elements

Syntax

Example

Leave a ReplyCancel Reply

CSS Borders

CSS Borders

CSS Border Styles

Example

CSS Border Styles – One Side

Example

CSS Border Width

Example

CSS border width –

Example

CSS Border Colors

Example

CSS Border Color – Single Side

Example

CSS Border – Single-Side Shorthand Properties

Example

CSS Borders – Global Shorthand Properties

Syntax

Example

CSS Rounded Borders

Syntax

Example

CSS Borders – Inline Elements

Syntax

Example

CSS Borders – Replaced Elements

Syntax

Example

Related Posts

CSS opacity not working in IE11

CSS styling numbers

CSS :lang pseudo-class

Leave a ReplyCancel Reply