Tag: border-right

Web development

CSS border-right Property

Post author By Lena Stanley
Post date September 7, 2021

The CSS border-right property is a shorthand property for:

border-right-width

border-right-style

border-right-color

Syntax:

border-right: border-width border-style border-color;

border-right-width – settles the width of an element’s right border.

border-right-style – property settles the style of an element’s right border.

border-right-color – settles the color of an element’s right border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right: 5px dotted #2a9d8f;
}

p {
  border-right: 4px solid #e76f51;
}

div {
  border-right: double;
}
</style>
</head>
<body>

<h4>A heading with a dotted #2a9d8f right border.</h4>

<p>A paragraph with a solid #e76f51 right border.</p>

<div>A div element with a double right border.</div>

</body>
</html>

Output:

A heading with a dotted #2a9d8f right border.

A paragraph with a solid #e76f51 right border.

A div element with a double right border.

Enjoy coding!

Read also:

CSS border Property

CSS border-bottom Property

Tags border, border-right, CSS

Web development

CSS border-right-width Property

Post author By Lena Stanley
Post date September 7, 2021

The CSS border-right-width property settles the width of an element’s right border.

Demo:

Syntax:

border-right-width: medium|thin|thick|length;

medium (default) – defines a medium right border.

thin – defines a thin right border.

thick – defines a thick right border.

length – allows you to specify the thickness of the right border (CSS Units).

Example1:

Set the width of the right border to thin:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: solid;
  border-right-width: thin;
}

p {
  border-style: solid;
  border-right-width: thin;
}
</style>
</head>
<body>

<h4>A heading with a thin right border.</h4>
<p>A paragraph with a thin right border.</p>

</body>
</html>

Output:

A heading with a thin right border.

A paragraph with a thin right border.

Example2:

Set the width of the left border to 10px:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: solid;
  border-right-width: 10px;
}

p {
  border-style: solid;
  border-right-width: 10px;
}
</style>
</head>
<body>

<h4>A heading with a 10px thick right border.</h4>
<p>A paragraph with a 10px thick right border.</p>

</body>
</html>

Output:

A heading with a 10px thick right border.

A paragraph with a 10px thick right border.

Enjoy coding!

Read also:

CSS border-bottom-width Property

CSS border-left-width Property

Tags border, border-right, border-right-width, CSS

Web development

CSS border-right-style Property

Post author By Lena Stanley
Post date September 7, 2021

The CSS border-right-style property settles the style of an element’s right border.

Demo:

Syntax:

border-right-style: dotted|dashed|solid|double|groove|ridge|inset|outset|none|hidden;

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example1:

A dashed left border:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: dashed;
  padding:10px;
}

p {
  border-style: solid;
  border-right-style: dashed;
  padding:10px;
}
</style>
</head>
<body>

<h4>A heading with a dashed right border.</h4>
<p>A paragraph with a dashed right border.</p>

</body>
</html>

Output:

A heading with a dashed right border.

A paragraph with a dashed right border.

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: dotted;
  
}

p {
  border-style: solid;
  border-right-style: dotted;
  
}
</style>
</head>
<body>

<h4>A heading with a dotted right border.</h4>
<p>A paragraph with a dotted right border.</p>

</body>
</html>

Output:

A heading with a dotted right border.

A paragraph with a dotted right border.

Enjoy coding!

Read also:

CSS border Property

CSS border-left-style

Tags border, border-right, border-right-style, CSS

Web development

CSS border-right-color Property

Post author By Lena Stanley
Post date September 7, 2021

The CSS border-right-color property settles the color of an element’s right border.

Syntax:

border-right-color: color|transparent;

color – defines the color of the right border.

transparent – the border color will be transparent.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: solid;
  border-right-color: #2a9d8f;
}

p {
  border-style: solid;
  border-right-color: #2a9d8f;
}
</style>
</head>
<body>

<h4>A heading with a colored right border.</h4>
<p>A paragraph with a colored right border.</p>

</body>
</html>

Output:

A heading with a colored right border.

A paragraph with a colored right border.

Enjoy coding!

Read also:

CSS border Property

CSS border-left-color Property

Tags border, border-right, border-right-color, CSS