Open In App

CSS border-bottom Property

Last Updated : 14 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The border-bottom property in CSS is used to set all bottom border properties in one line. It is used to set the width, style, and color of the bottom border. The default value is initial

Syntax

border-bottom: border-width border-style border-color|initial|inherit; 

Property Values

border-bottom is a shorthand to set the below property values:

Values

Descriptions

border-width

It is used to set the width of the border.

border-style

It is used to set the style of border. Its default value is ‘none’.

border-color

It is used to set the color of border.

initial

This property is used to set border-bottom to its default value.

inherit

This property is inherited from its parent.

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>border-bottom property</title>
 
    <!-- border-bottom CSS property -->
    <style>
        h1 {
            border-bottom: 5px solid green;
        }
 
        h2 {
            border-bottom: 4px dotted black;
        }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>border-bottom property</h2>
</body>
 
</html>


Output: 

Supported Browsers

The browser supported by border-bottom property are listed below: 

  • Google Chrome 1.0
  • Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

Previous Article
Next Article

Similar Reads

CSS border-bottom-left-radius Property
The border-bottom-left-radius property is used to define the radius of the bottom left corner of the border i.e. it makes the bottom-left of the border rounded. Syntax: border-bottom-left-radius: length|% [length|%]|initial|inherit; Default Value: its default value is 0. Property Value: Length: This property is used to specify the radius of the bor
2 min read
CSS border-bottom-width Property
The border-bottom-width property in CSS is used to set a specific width to the bottom border of an element. The border-bottom-style or border-style property is used for the element before using the border-bottom-width property. Syntax: border-bottom-width: length|thin|medium|thick|initial|inherit; Property Values: The border-bottom-width property v
2 min read
CSS border-bottom-right-radius Property
The border-bottom-right-radius property in CSS is used to define the radius of the right bottom corner of the border of a given element. It is used to round the corner on the right side of the bottom border. Syntax: border-bottom-right-radius:length|[value%]|initial|inherit; Property Value: The border-bottom-right-radius property values are listed
2 min read
CSS border-bottom-color Property
The CSS border-bottom-color property is used to set the color of the bottom border of an element. It is mandatory to declare the border-style or border-bottom-style property before using the border-bottom-color property always as there must exist a border first before we change its color. The current value of the element is the default color of thi
2 min read
CSS border-bottom-style Property
The border-bottom-style property in CSS is used to set the style of the bottom border of an element. Syntax: border-bottom-style: none|hidden|dotted|dashed| solid|double|groove|ridge|inset| outset|initial|inherit; Property Values: none: It is the default value and it makes the width of the bottom border zero. Hence, it is not visible.hidden: It is
5 min read
How to set the width of the bottom border in CSS ?
In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS inside the tags.We will use border-color, border-
2 min read
How to define the border bottom color is animatable in CSS ?
In this article, we will learn How to define the border-bottom-color is animatable in CSS. Animating the border-bottom-color of an element helps draw attention to it and make it more visually interesting. Approach: The border-bottom-color is the color of the bottom border, and we want to animate its color. To do that, we will use the animation prop
1 min read
How to set the width of the bottom border animatable using CSS ?
In this article, we will learn to set the width of the border-bottom animate using CSS. Approach: The border-bottom-width is the width of the bottom border, and we want to animate its width. We will use the animation property of the CSS. It takes three values The first is the name of the animation which is a keyframe name that we want to bind with.
1 min read
How to add border-bottom to table row &lt;tr&gt; in CSS ?
A border is an important component of any table in HTML. It is used to define the boundaries of the table and its elements. The border-bottom property is used to add a border to the bottom of an HTML element. In this article, we will discuss how to add a border-bottom to table row &lt;tr&gt;. When applied to a table row, it creates a border that se
3 min read
How to apply bottom border with only Input text field using CSS ?
Adding a bottom border to the input field visually distinguishes it from surrounding elements on the page. Making input fields stand out on a website in a form for example is crucial. Styling these inputs with clear borders, appealing colors, and effects, can easily capture the user’s attention. Table of Content Using the outline and border-bottom
3 min read