CSS Lesson 4: Webpage Borders

Hello everybody,

Michael here, and today’s lesson will cover how to use CSS borders on your webpage.

When you are designing your HTML website, borders are crucial design elements.

First off, let’s start by exploring CSS borders. To do that, let’s use the form we’ve been using for my CSS lessons (minus the background image from the previous lesson):

<!DOCTYPE html>
<html lang="es-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Form.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
    <title></title>
  </head>
  <body>
    <h1>Flight finder:</h1>
    <form action="Submitted.html" method="POST">
      <label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
      <input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="datepicker2">Pick the date you want to return from your vacation</label><br>
      <input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time1" name="time1"><br>
      <br>
      <label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time2" name="time2"><br>
      <br>
      <label for="layover">How many layovers do you want?</label><br>
      <input type="number" id="layover" name="layover" min="0" max="3"><br>
      <br>
      <input type="submit" value="Submit">
    </form>
    <div class="container">
     <p>Thank you for booking your next trip with XYZ Airlines!!</p>
     <p>Can't wait to see you on your travels!!</p>
   </div>
  </body>
</html>

Great, so we have the form webpage (along with the corresponding code) here. Now, let’s say we wanted to add a simple CSS border to the last two lines of text (the ones in red). How would we do so? Take a look at the highlighted line of CSS code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid
}

input{
  background-color: #00FFFF
}

To add a CSS border to an element on the form, simply add a border-style styling call and set any of the following values for border-style:

  • dotted-creates a dotted line border
  • dashed-creates a dashed line border
  • solid-creates a solid line border
  • double-creates a double border
  • groove-creates a 3D grooved border
  • ridge-creates a 3D ridged border
  • inset-creates a 3D inset border
  • outset-creates a 3D outset border
  • none-creates no border
  • hidden-creates a hidden line border

In this example, I set the value of the border-style property to solid, which creates a solid red border on the last two lines of text on this webpage.

Now, what if you wanted a thicker or thinner border? Let’s see how we can change border thickness (look at the highlighted section of code below):

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-width: 6px
}

input{
  background-color: #00FFFF
}

As you can see, I managed to make the border slightly thicker than it was before. How did I manage to do this? I added another styling call to the .container declaration that contains the property border-width and has a value of 6px (border thickness in CSS is always measured in px or pixels).

  • Remember that the value of the border-width property must always contain px at the end and a number at the beginning (e.g. 6px in this example). And don’t wrap this value in quotes-it’s not a string!

Now, as you may have noticed from the previous two examples, the border around the last two lines of text is red-this is because the border color will default to the color of the elements it contains, and since the text inside the border is red, the border itself will also be red.

Let’s say we wanted to change the aforementioned border’s color from red to green. How would we accomplish this? Take a look at the highlighted line of code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-width: 6px;
  border-color: green
}

input{
  background-color: #00FFFF
}

To change the border’s color, I simply added another styling call to the .container declaration; in this call, I used the border-color property and set this property’s value to green to change the border from red to green.

  • Using a HEX code, RGB code, HSL code, or the keyword transparent would have worked here too. However, using simple color names (e.g. red, blue, orange) always works with the border-color property, especially if you want a basic color.

So, having fun exploring the several different ways we can play with CSS borders? If so, great, but we’ve got one more thing to explore.

In case you weren’t aware, you can apply more than one styling to a border. Curious? Well check out the highlighted line of code below to see how you can apply multiple different stylings to a CSS border:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid dashed;
  border-width: 6px
}

input{
  background-color: #00FFFF
}

As you can see here, I created a border with two different stylings (solid on the top and bottom and dashed on the left and right). How did I accomplish this? I set the value of the border-style property to solid dashed, which will tell CSS to create a border that is dashed on two sides and solid on the other two sides. To set multiple different stylings for the border, simply list the styles you want for the border and separate the names of each style with a space. That’s it-and you can have between one and four styles for your border. Here’s how the multiple border stylings trick works in CSS:

  • Four border stylings:
    • example: border-style: dotted dashed solid ridge
    • how it works: top border dotted, right border dashed, bottom border solid, left border ridge
  • Three border stylings:
    • example: border-style: dotted solid groove
    • how it works: top border dotted, right and left borders solid, bottom border groove
  • Two border stylings:
    • example: border-style: solid dashed
    • how it works: top and bottom borders solid, left and right borders dashed
  • One border styling:
    • example: border-style: solid
    • how it works: all borders solid

Pretty neat stuff right? Just wait until you see that similar logic for the multiple border stylings trick also works to apply multiple border colors. Check out the highlighted line of code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid dashed;
  border-color: red green;
  border-width: 6px
}

input{
  background-color: #00FFFF
}

And here’s what the webpage looks like with the multiple border colors applied:

How did I generate a red and green border? I simply added another styling call to the .container declaration that used the border-color property along with two color values separated by a space-red green (similar to what I did with the multiple values for the border-style property). The highlighted line of code above tells CSS to make the top and bottom borders red and the left and right borders green.

  • You’ll notice that I used both the border-color and color properties in the .container declaration. Note that you can’t use these properties interchangeably-color sets the color of the elements in the .container declaration (the last two lines of text on this webpage) while border-color sets the color of the border around the aforementioned elements.

Also, just as with multiple CSS borders, you can apply between one and four different border colors to your border. Here’s how the multiple border colors trick would work in CSS:

  • Four border colors:
    • example: border-color: red orange green blue
    • how it works: top border red, right border orange, bottom border green, left border blue
  • Three border colors:
    • example: border-color: red orange green
    • how it works: top border red, right and left borders orange, bottom border green
  • Two border colors:
    • example: border-color: red orange
    • how it works: top and bottom borders red, left and right borders orange
  • One border color:
    • example: border-color: red
    • how it works: all borders red

Thanks for reading,

Michael

One thought on “CSS Lesson 4: Webpage Borders”

  1. Pingback: CSS Lesson 5: Webpage Margins and Padding – Michael's Analytics Blog

Leave a Reply