The border-bottom property allows you to control the width, style, and color of the bottom border of a box. Being able to manipulate this aspect can be useful towards outlining and showcasing a particular box when you want the bottom to stand out separate from the other three sides.
For this beginner’s tutorial, you will learn some straightforward techniques to apply the border-bottom property in effective and useful ways. The information will combine CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.
What Are the Options?
Width
When defining width, you have the following options when using the border-bottom-width property. These values allow you to give “basic” dimensions. Of course you also have the option of using pixels as a value to have full control of very precise measurements of your defining width.
- Medium: Specifies a medium bottom border. This is the default state.
- Thin: Specifies a thin bottom border.
- Thick: Specifies a thick bottom border.
- Length: Allows you to define the thickness of the bottom border.
- Initial: Sets this property to its default value.
- Number of Pixels: Sets the border width using pixels.
Style
When defining style, you have the following options when using the border-bottom-style property. There is a long list of values that you can play with and each of them gives you something completely different. An example will be provided further in this tutorial.
- None: Specifies no border. This is default
- Hidden: The same as “none.”
- Dotted: Specifies a dotted border.
- Dashed: Specifies a dashed border.
- Solid: Specifies a solid border.
- Double: Specifies a double border.
- Groove: Specifies a 3D grooved border. The effect depends on the border-color value.
- Ridge: Specifies a 3D ridged border. The effect depends on the border-color value.
- Inset: Specifies a 3D inset border. The effect depends on the border-color value.
- Outset: Specifies a 3D outset border. The effect depends on the border-color value.
- Initial: Sets this property to its default value.
Color
As you define the width, you have the following options for defining the border-bottom-color property. When it comes to color, the options are almost limitless. This is an area where you can really showcase your understanding of the color palette.
Note: You must always declare the border-style or the border-bottom-style property before the border-bottom-color property. An element must have a defined border before you can change the color.
- Color: Specifies the color of the bottom border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element.
- Transparent: Specifies that the border color should be transparent.
- Initial: Sets this property to its default value.
Starting Your HTML Page
Building a Box
Starting with the following code sample, you can see that some CSS has been added so that a box is defined with actual borders. This box will contain a “solid” border with a defined color. Starting with a full bordered box will allow you to see the transformations as you progress in this tutorial.
<!DOCTYPE html>
<title>Border-Bottom</title>
<head>
<style>
.bordered {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid darkorange;
}
</style>
</head><body><div class="bordered">Box with a border
</div></body
</html>Adding Border-Bottom-Width to the CSS
When adding the border-bottom property, you need to first define the width of the border. This will define only the bottom border of the box and as such, should be defined differently to set it apart from the rest. You can use the values listed above including pixel dimensions to have more control over the exact thickness of the border.
<!DOCTYPE html>
<title>Border-Bottom</title>
<head>
<style>
.bordered {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid darkorange;
border-bottom-width: 12px;
}
</style>
</head><body><div class="bordered">Box with a border
</div></body
</html>As you can see, the bottom border has now been well defined.
Adding a New Color to the Border-Bottom Property
Now that you have defined the border thickness, it is now time to use the border-bottom-color property to define a specific color to the border.
<!DOCTYPE html>
<title>Border-Bottom</title>
<head>
<style>
.bordered {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid darkorange;
border-bottom-width: 12px;
border-bottom-color: darkgreen;
}
</style>
</head><body><div class="bordered">Box with a border
</div></body
</html>As you can see, the bottom border has been defined with the dark green color added into the CSS.
Adding a Specific Style to the Border-Bottom Property
Now that you have defined both the border thickness and the border color, it is now time to use the border-bottom-style property to define a specific style to the border.
<!DOCTYPE html>
<title>Border-Bottom</title>
<head>
<style>
.bordered {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid darkorange;
border-bottom-width: 12px;
border-bottom-color: darkgreen;
border-bottom-style: dotted;
}
</style>
</head><body><div class="bordered">Box with a border
</div></body
</html>As you can see, the bottom border has been defined with the dotted style as defined in the CSS.
Final Note
Adding a Border-Radius to the CSS
Although this tutorial is about the border-bottom property, you can take note to dig further into your CSS pallet towards making your box look even more spectacular. You can do this by adding the border-radius property. What this does is give your box some rounded edges. Often a basic box with its 90 degree corners may not be exactly what you want to show.
Note: As you increase your border-radius value, the corners become more rounded. Example: a 12px value will be more rounded than an 8px value.
<!DOCTYPE html>
<title>Border-Bottom</title>
<head>
<style>
.bordered {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid darkorange;
border-bottom-width: 12px;
border-bottom-color: darkgreen;
border-radius: 12px;
}
</style>
</head><body><div class="bordered">Box with a border
</div></body
</html>This yields the following:
Having a working knowledge of the use of the border-bottom CSS property, as well as using all of the many values and possibilities for altering the style and width, give you unlimited power to be creative and enjoy the artistic process to further enhance your website.
Where to Next?
The “How to Apply the CSS Property: border-bottom” tutorial should provide a starting point for further inquiry into the world of HTML properties for customizing your web layout while always keeping in mind the practical applications with HTML and CSS.
Check out “An Introduction to Margins and Padding in CSS and HTML,” and Designing CSS Borders to enhance your understanding and expand your horizon.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
