Border-Bottom

How to Apply the CSS Property: border-bottom

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.

   .bordered 
Box with a border
  

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.

    
Box with a border
  

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.

    
Box with a border
  

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.

    
Box with a border
  

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.

    
Box with a border
  

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!

Источник

border-bottom

The border-bottom shorthand CSS property sets an element’s bottom border. It sets the values of border-bottom-width , border-bottom-style and border-bottom-color .

Try it

As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

border-bottom-style: dotted; border-bottom: thick green; 

It is actually the same as this one:

border-bottom-style: dotted; border-bottom: none thick green; 

The value of border-bottom-style given before border-bottom is ignored. Since the default value of border-bottom-style is none , not specifying the border-style part results in no border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; /* Global values */ border-bottom: inherit; border-bottom: initial; border-bottom: revert; border-bottom: revert-layer; border-bottom: unset; 

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

• border-bottom-width : medium
• border-bottom-style : none
• border-bottom-color : currentcolor

• border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
• border-bottom-style : as specified
• border-bottom-color : computed color

• border-bottom-color : a color
• border-bottom-style : discrete
• border-bottom-width : a length

Formal syntax

border-bottom =
||
||

=
|
thin |
medium |
thick

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

Applying a bottom border

HTML

div>This box has a border on the bottom side.div> 

CSS

div  border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

border-bottom-style

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

Try it

Note: The specification doesn’t define how borders of different styles connect in the corners.

Syntax

/* Keyword values */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: solid; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: outset; /* Global values */ border-bottom-style: inherit; border-bottom-style: initial; border-bottom-style: revert; border-bottom-style: revert-layer; border-bottom-style: unset; 

The border-bottom-style property is specified as a single keyword value.

Formal definition

Formal syntax

border-bottom-style =

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

Demonstrating all border styles

HTML

table> tr> td class="b1">nonetd> td class="b2">hiddentd> td class="b3">dottedtd> td class="b4">dashedtd> tr> tr> td class="b5">solidtd> td class="b6">doubletd> td class="b7">groovetd> td class="b8">ridgetd> tr> tr> td class="b9">insettd> td class="b10">outsettd> tr> table> 

CSS

/* Define look of the table */ table  border-width: 3px; background-color: #52e385; > tr, td  padding: 3px; > /* border-bottom-style example classes */ .b1  border-bottom-style: none; > .b2  border-bottom-style: hidden; > .b3  border-bottom-style: dotted; > .b4  border-bottom-style: dashed; > .b5  border-bottom-style: solid; > .b6  border-bottom-style: double; > .b7  border-bottom-style: groove; > .b8  border-bottom-style: ridge; > .b9  border-bottom-style: inset; > .b10  border-bottom-style: outset; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The other style-related border properties: border-left-style , border-right-style , border-top-style , and border-style .
• The other bottom-border-related properties: border-bottom , border-bottom-color , and border-bottom-width .

Found a content problem with this page?

This page was last modified on May 4, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник