Tag: border-bottom

Web development

CSS border-bottom Property

Post author By Lena Stanley
Post date August 31, 2021

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

border-bottom-width

border-bottom-style

border-bottom-color

Note: If you do not specify the border-bottom-color, the color applied will be the color of the text.

Syntax:

border-bottom: border-width border-style border-color;

border-bottom-width – defines the width of the bottom border.

border-bottom-style – defines the style of the bottom border.

border-bottom-color – defines the color of the bottom border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-bottom: 5px dotted red;
}

p {
  border-bottom: 4px dashed blue;
}

div {
  border-bottom: solid;
}
</style>
</head>
<body>

<h4>A heading with a dotted red bottom border.</h4>   
<p>A paragraph with a dashed blue bottom border.</p>
<div>A div element with a solid bottom border.</div>

</body>
</html>

Output:

A heading with a dotted red bottom border.

A paragraph with a dashed blue bottom border.

A div element with a solid bottom border.

Enjoy coding!

Read also:

CSS Border Property

CSS Multiple Borders

Tags border, border-bottom, CSS

Web development

CSS border-bottom-width Property

Post author By Lena Stanley
Post date August 31, 2021

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

Demo:

Syntax:

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

medium (default) – defines a medium bottom border.

thin – defines a thin bottom border.

thick – defines a thick bottom border.

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

Example1:

Set the width of the bottom border to medium:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom-style: solid;
  border-bottom-width: medium;
}

div {
  border-style: solid;
  border-bottom-width: medium;
}
</style>
</head>
<body>

<p>A paragraph with a medium bottom border.</p>

<div>A div element with a medium bottom border.</div>

</body>
</html>

Output:

A paragraph with a medium bottom border.

A div element with a medium bottom border.

Example2:

Set the width of the bottom border to 5px:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom-style: solid;
  border-bottom-width: 5px;
}

div {
  border-style: solid;
  border-bottom-width: 5px;
}
</style>
</head>
<body>

<p>A paragraph with a 5px thick bottom border.</p>

<div>A div element with a 5px thick bottom border.</div>

</body>
</html>

Output:

A paragraph with a 5px thick bottom border.

A div element with a 5px thick bottom border.

Enjoy coding!

Read also:

CSS border-radius property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

Tags border, border-bottom, border-bottom-width, CSS

Web development

CSS border-bottom-style Property

Post author By Lena Stanley
Post date August 31, 2021

Demo:

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

Syntax:

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

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 dotted bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: dotted;
}

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

<div>A div element with a dotted bottom border</div>

<p>A paragraph with a dotted bottom border.</p>

</body>
</html>

Output:

A div element with a dottoed bottom border

A paragraph with a dotted bottom border.

Example2:

A double bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: double;
}

p {
  border-style: solid;
  border-bottom-style: double;
}
</style>
</head>
<body>

<div>A div element with a double bottom border</div>

<p>A paragraph with a double bottom border.</p>

</body>
</html>

Output:

A div element with a double bottom border

A paragraph with a double bottom border.

Enjoy coding!

Read also:

CSS border Property

CSS Outline

CSS Border Corner Shape: Scoop, Notch, Square-Cut

Tags border, border-bottom, border-bottom-style, CSS, HTML

Web development

CSS border-bottom-right-radius Property

Post author By Lena Stanley
Post date August 24, 2021

The CSS border-bottom-right-radius property specifies the radius of the bottom right corner.

Demo:

Click the button to change the border-bottom-right-radius property (50px) of the DIV element:

Hello

Syntax:

border-bottom-right-radius: length;

length – specifies the shape of the bottom-left corner (px/%).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-right-radius: 25px;
}

#example2 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-right-radius: 50px 20px;
}
    
#example3 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-right-radius: 50%;
}
</style>
</head>
<body>

<h4>border-bottom-right-radius: 25px;</h4>
<div id="example1">
  <p>The border-bottom-right-radius property defines the radius of the bottom-right corner.</p>
</div>

<h4>border-bottom-right-radius: 50px 20px;</h4>
<div id="example2">
  <p>If two values are set; the first one is for the bottom border, the second one for the right border.</p>
</div>
    
<h4>border-bottom-right-radius: 50%;</h4>
<div id="example3">
  <p>The CSS border-bottom-right-radius property is set to 50%.</p>
</div>

</body>
</html>

Output:

border-bottom-right-radius: 25px;

The border-bottom-right-radius property defines the radius of the bottom-right corner.

border-bottom-right-radius: 50px 20px;

If two values are set; the first one is for the bottom border, the second one for the right border.

border-bottom-right-radius: 50%;

The CSS border-bottom-right-radius property is set to 50%.

Enjoy coding!

CSS border-radius property

Tags border, border-bottom, border-bottom-right-radius, CSS

Web development

CSS border-bottom-left-radius Property

Post author By Lena Stanley
Post date August 24, 2021

The CSS border-bottom-left-radius property specifies the radius of the bottom-left corner.

Demo:

Click the button to change the border-bottom-left-radius property (50px) of the DIV element:

Hello

Syntax:

border-bottom-left-radius: length;

length – specifies the shape of the bottom-left corner (px/%).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 25px;
}

#example2 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 50px 20px;
}
    
#example3 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 50%;
}
</style>
</head>
<body>

<h4>border-bottom-left-radius: 25px;</h4>
<div id="example1">
  <p>The border-bottom-left-radius property defines the radius of the bottom-left corner.</p>
</div>

<h4>border-bottom-left-radius: 50px 20px;</h4>
<div id="example2">
  <p>If two values are set; the first one is for the bottom border, the second one for the left border.</p>
</div>
    
<h4>border-bottom-left-radius: 50%;</h4>
<div id="example3">
  <p>The CSS border-bottom-left-radius property is set to 50%.</p>
</div>

</body>
</html>

Output:

border-bottom-left-radius: 25px;

The border-bottom-left-radius property defines the radius of the bottom-left corner.

border-bottom-left-radius: 50px 20px;

If two values are set; the first one is for the bottom border, the second one for the left border.

border-bottom-left-radius: 50%;

The CSS border-bottom-left-radius property is set to 50%.

Enjoy coding!

Read also:

CSS border-radius property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

Tags border, border-bottom, border-bottom-left-radius, CSS

Web development

CSS border-bottom-color Property

Post author By Lena Stanley
Post date August 23, 2021

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

Syntax:

border-bottom-color: color|transparent;

color – defines the color of the bottom border.

transparent – defines that the border color should be transparent.

Example:

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

p {
  border-style: solid;
  border-bottom-color: #e76f51;
}
</style>
</head>
<body>

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


</body>
</html>

Output:

A heading with a colored bottom border.

A paragraph with a colored bottom border.

Enjoy coding!

Read also:

CSS Border Property

CSS Gradient Border

Tags border, border-bottom, border-bottom-color, CSS