Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

The Best Way to Use CSS Border Bottom for Great Visuals

Discovering the Beauty Of Web Design With CSS Borders

The CSS border-bottom property is a powerful tool that allows web developers and designers to customize the bottom border of elements, adding style and visual interest to their web projects.

By controlling the width, style, and color of the bottom border, you can create unique designs that enhance the overall look and feel of your website.

In this comprehensive guide, we will explore various techniques for applying the border-bottom property effectively using CSS. We will cover everything from understanding the different options available for customization to practical implementation in HTML and CSS.

Understanding the Basics of CSS Border Bottom

Let’s start at the foundation. The CSS border-bottom property is a fundamental styling feature that allows you to define the appearance of the bottom border of an element. Whether it’s a text container, a button, or a full-width section, the border-bottom property lets you define the border’s color, style, and width.

Syntax:

selector {
  border-bottom: value;
}

The value can include the border width, style, and color. For example:

/* Applying a solid, red bottom border with a thickness of 2px */
.element {
  border-bottom: 2px solid red;
}

Refer to this blog by w3schools.com for a better understanding of CSS border bottom style.

Applying CSS Border Bottom in HTML and CSS

To apply the border-bottom property in HTML and CSS, we need to set up a basic HTML page structure and include a CSS code block. This will serve as the foundation for applying customizations to borders.

Setting Up the HTML Page

Start by creating the basic structure of an HTML page. You can use any text editor or code editor, such as Notepad++ or Visual Studio Code, for convenience.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Border Bottom</title>
  <style>
    /* CSS code goes here */
  </style>
</head>
<body>
  <!-- HTML content goes here -->
</body>
</html>

Make sure to include the <style> tags within the <head> section to define your CSS rules.

Creating a Box Element

To apply the border-bottom property, we need an element to work with. Let’s create a simple box element using HTML and add some basic styling using CSS.

<div class="bordered">Box with a border</div>
.bordered {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 3px solid darkorange;
}

In this example, we have created a <div> element with the class “bordered”. We have set its width to 200 pixels, height to 100 pixels, added some padding of 20 pixels, and applied a solid border of 3 pixels in width with the color darkorange. Feel free to customize these values according to your preference.

Now that we have set up our HTML page and created a box element, let’s dive into customizing the bottom border.

Deep Dive Into CSS Border Bottom Style Property Values

Before we dive into applying the border-bottom property, let’s take a closer look at its individual components and how they affect the appearance of the bottom border.

1. Controlling the Width with border-bottom-width

  • To control the width of the bottom border, we use the border-bottom-width property.

  • This property allows us to specify the thickness of the bottom border using various units of measurement.

  • By default, the width is set to medium, but we can also choose from predefined values such as thin and thick.

  • Additionally, we can set a specific length or use pixels (px) to define a custom width which will override its default value.

  • Let’s take a look at some examples:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Four Different Border Widths</title>
  <style>
    .bordered {
      width: 200px;
      padding: 20px;
      margin: 20px;
      text-align: center;
    }

    /* Default width */
    .bordered.default {
      border: medium solid #3498db; /* To clearly visualize the borders */
    }

    /* Thin width */
    .bordered.thin {
      border-bottom-width: thin;
      border: thin solid #3498db; /* To clearly visualize the borders */
    }

    /* Thick width */
    .bordered.thick {
      border: thick solid #3498db; /* To clearly visualize the borders */
    }

    /* Custom width using pixels */
    .bordered.custom {
      border:2px solid #3498db; /* To clearly visualize the borders */
    }
  </style>
</head>
<body>
  <div class="bordered default">Default Border</div>
  <div class="bordered thin">Thin Border</div>
  <div class="bordered thick">Thick Border</div>
  <div class="bordered custom">Custom Border (2px)</div>
</body>
</html>

In the above example,

We have four div elements

  1. Default bordered div which has a border-bottom-width: medium

  2. Thin bordered div which has a border-bottom-width: thin

  3. Default bordered div which has a border-bottom-width: thick

2. Defining the Line Style with border-bottom-style

  • The border-bottom-style property allows us to define the style of the bottom border.

  • There are several options available, each providing a different visual effect.

  • The most commonly used style is solid, which creates a straight, continuous line.

  • Other options include dotted, which creates a series of dots; dashed, which creates a series of short dashes; and double, which creates two parallel lines.

  • Additionally, there are some 3D effects available: groove, ridge, inset, and outset. These styles create a three-dimensional appearance based on the border-bottom-color value.

Here are some examples of using different styles:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Four Different Border Widths</title>
  <style>
    .bordered {
      width: 200px;
      padding: 20px;
      margin: 20px;
      text-align: center;
    }

    .bordered.solid {
      border: medium solid #93b65a;
      border-bottom-style: solid; /* To clearly visualize the borders */
    }

    .bordered.dotted {
      border: medium solid #93b65a;
      border-bottom-style: dotted; /* To clearly visualize the borders */
    }

    .bordered.dashed {
      border: medium solid #93b65a;
      border-bottom-style: dashed; /* To clearly visualize the borders */
    }

    .bordered.double {
      border:medium solid #93b65a;
      border-bottom-style: double; /* To clearly visualize the borders */
    }
  </style>
</head>
<body>
  <div class="bordered default">Solid Border</div>
  <div class="bordered dotted">Dotted Border</div>
  <div class="bordered dashed">Dashed Border</div>
  <div class="bordered double">Double Border</div>
</body>
</html>

In the above example :

We have four div elements

  1. Solid bordered div which has a border-bottom-style: solid

  2. Dotted bordered div which has a border-bottom-style: dotted

  3. Dashed bordered div which has a border-bottom-style: dashed

  4. Double-bordered div which has a border-bottom-style: double

3. Customizing the Color with border-bottom-color

  • To customize the color of the bottom border, we use the border-bottom-color property.

  • This property allows us to specify the color using various formats, such as named colors, hexadecimal codes, or RGB values.

  • By default, the color is set to the current text color which it has inherited from the parent element. However, we can easily change it to create a more visually appealing design.

  • Here are some examples of different color options:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Four Different Border Widths</title>
  <style>
    .bordered {
      width: 200px;
      padding: 20px;
      margin: 20px;
      text-align: center;
    }

    .bordered.blue {
      border: medium solid #3498db; /* To clearly visualize the borders */
    }

    .bordered.red {
      border: medium solid #3498db;
      border-bottom-color: #e74c3c; /* To clearly visualize the borders */
    }

    .bordered.green {
      border: medium solid #3498db;
      border-bottom-color: #27ae60; /* To clearly visualize the borders */
    }

    .bordered.yellow {
      border:medium solid #3498db;
      border-bottom-color: #f39c12; /* To clearly visualize the borders */
    }
  </style>
</head>
<body>
  <div class="bordered blue">Blue Border</div>
  <div class="bordered red">Red Border</div>
  <div class="bordered green">Green Border</div>
  <div class="bordered yellow">Yellow Border</div>
</body>
</html>

In the above example :

We have four div elements

  1. Solid bordered div which has a border-bottom-style: solid

  2. Dotted bordered div which has a border-bottom-style: dotted

  3. Dashed bordered div which has a border-bottom-style: dashed

  4. Double-bordered div which has a border-bottom-style: double

Here is a detailed video tutorial showing the implementation of different elements

Now that we have a better understanding of the individual components of the border-bottom property, let’s move on to applying it in HTML and CSS.

CSS Border Properties Comparison

Different CSS Properties for Border Styling

PropertyDescriptionExample
border-bottomSpecifies the bottom border of an elementborder-bottom: 2px solid #007bff;
border-colorSets the color for all borders of an elementborder-color: #e74c3c;
border-radiusDefines the curvature of border cornersborder-radius: 5px;
border-bottom-widthSets the width of the bottom borderborder-bottom-width: 3px;
border-styleSpecifies the style of the borderborder-style: dashed;
border-collapseDetermines the table border collapsing behaviorborder-collapse: collapse;
border-spacingSets the spacing between cells in a tableborder-spacing: 10px;

Customizing the Bottom Border

In this section, we will explore various techniques to customize the bottom border of our box element. We will cover adjusting the width, changing the color, setting different styles, and adding rounded corners using the border-radius property.

Adjusting the Width of the Bottom Border

To adjust the width of the bottom border, we can modify the border-bottom-width property. Let’s take a look at some examples:

.bordered {
  border-bottom-width: 12px; /* Set bottom border width to 12 pixels */
}

.bordered {
  border-bottom-width: thin; /* Set thin bottom border width */
}

In the first example, we have set the bottom border width to 12 pixels. This creates a bold, prominent border at the bottom of our box element.

In the second example, we have used the predefined value thin to create a more subtle and delicate bottom border.

Feel free to experiment with different values and see how they affect the appearance of your bottom border.

Changing the Color of the Bottom Border

The color of the bottom border can be customized using the border-bottom-color property. Let’s explore some color options:

.bordered {
  border-bottom-color: red; /* Set bottom border color to red */
}

.bordered {
  border-bottom-color: #00ff00; /* Set bottom border color to green using hexadecimal code */
}

In the first example, we have set the bottom border color to red. This creates a vibrant and eye-catching effect. In the second example, we have used a hexadecimal code (#00ff00) to set the color to green. You can also use named colors or RGB values to define your desired color.

Remember to choose colors that complement your overall design and enhance visual appeal.

Setting Different Styles for the Bottom Border

The style of the bottom border can be modified using the border-bottom-style property. Let’s take a look at some style options:

.bordered {
  border-bottom-style: dotted; /* Set bottom border style to dotted */
}

.bordered {
  border-bottom-style: dashed; /* Set bottom border style to dashed */
}

In the first example, we have set the bottom border style to “dotted”. This creates a series of dots, giving the bottom border a playful and unique appearance. In the second example, we have used the “dashed” style, which creates a series of short dashes.

Feel free to experiment with different styles and see how they can enhance your design.

Adding Rounded Corners with border-radius

To add rounded corners to our box element, we can use the border-radius property. This property allows us to create smooth curves on each corner, giving our element a softer and more modern look.

.bordered {
  border-radius: 12px; /* Add rounded corners with a radius of 12 pixels */
}

In this example, we have added rounded corners to our box element with a radius of 12 pixels. You can adjust the value to create different levels of roundness according to your design preferences.

By combining width, color, style, and rounded corners, you can create unique and visually appealing designs using the CSS border-bottom property.

Let’s apply what we have learned so far and customize different elements using different combinations of border-bottom width, style, color, and radius property

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Four Different Border Widths</title>
  <style>
    .bordered {
      width: 200px;
      padding: 20px;
      margin: 20px;
      text-align: center;
    }

    .bordered.red {
      border: medium solid #f39c12;
      border-bottom-width: thin;
      border-bottom-color: red;
      border-bottom-left-radius: 50px; /* To clearly visualize the borders */
    }

    .bordered.green {
      border:medium solid #f39c12;
      border-bottom-color: #3d769d; 
      border-bottom-style: dotted;
      border-bottom-right-radius: 50px;/* To clearly visualize the borders */
    }

    .bordered.yellow {
      border:medium solid #f39c12;
      border-bottom-color: #27ae60;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px; /* To clearly visualize the borders */
    }
  </style>
</head>
<body>
  <div class="bordered red">Red thin Border Curved on left bottom</div>
  <div class="bordered green">Blue dotted Border Curved on right bottom</div>
  <div class="bordered yellow">Green Bottom Border Curved on both</div>
</body>
</html>

In the above example :

We have three div:

  1. Box with Red thin Border Curved on the left bottom

  2. Box with Blue dotted Border Curved on the right bottom

  3. Box with Green Bottom Border Curved on both

Follow this video tutorial for more such tips on customizing border-bottom

Responsive Bootstrap Border Bottom

You can easily apply different border styles to an element based on screen sizes using Bootstrap’s responsive utility classes. Here’s an example with code that demonstrates how to create responsive borders:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Bootstrap Borders</title>
  <!-- Link to Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* Additional Custom Styles (Optional) */
    .custom-box {
      padding: 20px;
      text-align: center;
      margin: 20px;
      border: 2px solid #007bff; /* Default border style */
    }

    @media (max-width: 576px) {
      /* Remove border for small screens */
      .custom-box {
        border-bottom: none;
      }
    }

    @media (min-width: 992px) {
      /* Add border for large screens */
      .custom-box {
        border-bottom: 5px solid #007bff;
      }
    }
  </style>
</head>
<body>

  <h1 class="text-center mt-5">Responsive Bootstrap Borders</h1>

  <!-- Responsive Border Example -->
  <div class="custom-box">
    <h3>Let's learn Bootstrap Borders With Purecode</h3>
    <p>This box has different border styles based on screen size.</p>
  </div>

</body>
</html>

In this code:

  • The border: 2px solid #007bff; sets the default border style for all screen sizes.

  • The @media queries specify different border styles for small screens (576px and below) and large screens (992px and above).

  • For small it will have border bottom solid while for large screen it will have border bottom style none

So now you’ve not only learned to adjust the width, style, and color of borders but also explored responsive design considerations, accessibility improvements, and integration with popular CSS frameworks, ensuring your designs are both visually appealing and user-friendly.

Now, it’s time to take your skills to the next level! Apply what you’ve learned by experimenting with border-bottom in your own web applications.

Additionally, explore the capabilities of PureCode.ai, a developer tool that utilizes AI to transform design images into functional front-end code. With over 10,000 AI-generated components and theme customization options, PureCode.ai opens the door to seamless coding and design innovation.

Advanced Techniques

While we have covered the basics of customizing the bottom border using the CSS border-bottom property, there are advanced techniques that can further enhance your designs.

Let’s briefly explore some of these options:

1. Gradient Borders

  • One advanced technique is creating gradient borders.

  • Instead of having a single solid color for the bottom border, you can apply a gradient effect using CSS. This adds depth and visual interest to your design.

  • To create a gradient border, you can use the linear-gradient() function in the background image property.

  • This function allows you to define multiple color stops and directions for the gradient effect.

  • Here’s an example of applying a linear gradient to the bottom border:

.bordered {
  border-bottom: 3px solid;
  background-image: linear-gradient(to right, red, yellow, green);
}

In this example,

  • We have applied a linear gradient that starts with red on the left side and transitions to yellow in the middle and green on the right side.

  • This creates a vibrant and eye-catching gradient effect for the bottom border.

Refer to this article by css-tricks to know more about gradient borders.

2. Animating Borders

  • To add interactivity and dynamic effects to the bottom border, you can use CSS animations and transitions.
  • This allows you to create smooth and engaging border animations, such as pulsating borders or borders that change color on hover.
  • The @keyframes rule and the transition property are key tools for creating these animations.
  • You can use CSS animations to create effects such as pulsating or changing colors.
  • Here’s a simple example using keyframes:@keyframes pulsate { 0% { border-color: #27ae60; } 50% { border-color: #f39c12; } 100% { border-color: #27ae60; } } .animated-border { border-bottom: 2px solid #27ae60; animation: pulsate 3s infinite; } In this example, the pulsate animation alternates the border color between green, orange, and back to green over a 3-second duration, creating a pulsating effect.

3. Box Shadow for Depth

  • Adding a subtle box shadow to the bottom border can create a sense of depth, making your elements appear lifted.
  • This technique is particularly effective for creating a card-like effect.
  • Here’s a simple implementation:
.box-shadow-border {
  border-bottom: 2px solid #3498db;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Adjust the values in the box-shadow property to control the shadow’s size and opacity.

These advanced techniques allow you to push the boundaries of CSS border styling, adding depth, animation, and gradient effects to enhance your web design. Experiment with these techniques to create visually stunning and dynamic user experiences.

Conclusion: Unleashing the Power of CSS Border-Bottom

In the realm of web design, the CSS border-bottom property emerges as a dynamic force, offering unparalleled versatility for enhancing visual appeal and user interaction. This guide has unraveled the intricacies of this property, empowering designers to tailor widths, styles, colors, and rounded corners for truly distinctive designs.

From fundamental adjustments to advanced techniques like gradient and animated borders, this exploration unveils the vast potential of CSS border-bottom. The key lies in continuous experimentation, staying attuned to design trends, and embracing the transformative capabilities of this property to captivate audiences and elevate the overall user experience.

Seize the opportunity to translate knowledge into action! Implement Bootstrap borders on your web elements, experiment with diverse styles, and share your creations. Propel your design journey further by delving into PureCode.ai, a revolutionary AI-driven tool that transforms design visions into functional front-end code.

Visit PureCode.ai to embark on a journey of seamless coding and design innovation. Unleash your creativity, make your designs unforgettable, and revel in the endless possibilities of web design.

Happy coding!

Yash Poojari

Yash Poojari