Border-Style: Web Design Series: CSS Part 8

border-style

The Border-Style Property In CSS
Get the source code for this lesson at the end of the post!

Borders are a big part of CSS. There are countless ways to create and design borders for your page, and can be applied to just about every HTML element you have, including the body, which would create a border around the entire web page. This lesson is going to be split up over a couple of posts in order to cover everything. Throughout these posts, you’ll be learning many CSS border properties. Let’s start with the required property in order to create a border; border-style:. I’ve created a few HTML elements and added some borders using CSS. See the examples below.

border-style code

border-style display

By default, the border will be black and a few pixels wide. In our h4 rule, we added “border-style: solid;“, which gave us a solid black border around the h4 heading that spans the width of the page. For now, we’re not going to mess with width or height, but that is something we’re going to get into soon. Border-style is the required CSS property in order to create a border. We wouldn’t be able to just use the border-color property to make a border; it always needs a style before we can have any border at all. Hence border-style.

There are a few different styles that we can use for the border. Solid is one, and we see another in our p rule; “border-style: dashed;“. This creates a black, dashed border around our paragraph. The final example is in the ol rule; we have two style values entered for the border-style property, and they are double and dashed. Notice that we only separate them with a space. There is no comma. The result that we get is a border around the ordered list that is double lined on the top and bottom¬†and dashed on the left and right. You’ll be able to see the double line better when you run the code in your browser. Or you can zoom in on this page to around 200%.

The border-style property can take up to four values. As you’ve just seen with the ol rule, when we give it two values; the first value will affect the top and bottom; the second value with affect the left and right sides of the border. See the list below for the effect from one or multiple values.

border-style: multiple values and affect

  1. One Value
    • All four sides of the border will be the same.
  2. Two Values
    • First affects top and bottom, Second affects right and left.
  3. Three Values
    • First affects top, Second affects right and left, Third affects bottom.
  4. Four Values
    • First affects top, Second affects right, Third affects bottom, Fourth affects left.

You might be wondering why I said right and left when describing the effects of multiple values. The reason for this is that many CSS rules can be written shorthand. Which basically means; instead of adding a declaration for border-style, then border-width, then border-color; you could combine all of these declarations into one. And CSS declarations with four rules go in this order: Top, Right, Bottom, Left. The first value is for the top style and then it moves clockwise. We’ll learn much more in the near future. We’re gonna split up the border lessons so that you don’t get confused. And much of the new code that you’ll be learning can be applied to many other areas of CSS. Below is a list of all of the border style values available for you to use.

List of values for the border-style: property

    • solid = solid border
    • dashed = dashed border
    • dotted = dotted border
    • double = double line border
    • groove = 3D grooved border. The effect you get depends on border color.
    • ridge = 3D ridged border. The effect you get depends on border color.
    • inset = 3D inset border. The effect you get depends on border color.
    • outset = 3D outset border. The effect you get depends on border color.
    • hidden = hidden border
    • none = no border

Border designs are styled in individual sections very often to come up with awesome custom borders. To target each side specifically for style type you have these options.

Properties to target specific border sides for styling.

      • border-style: Targets all four sides.
      • border-top-style: Targets top of border.
      • border-right-style: Targets right side of border.
      • border-bottom-style: Targets bottom of border.
      • border-left-style: Targets left side of border.

That’s gonna do it for this lesson. I don’t want to border overload you. We just focused on border-style today. For a side project, try out a few variations with the border-style properties and values. If you’re feeling a little adventurous, throw in a border-color: declaration. Just remember that you have to have a border-style: declaration in order to create a border at all, so your rule would have two declarations. Later on, we’ll learn how to combine properties and values into one declaration to create our borders. Have fun, I’ll see you in the next post.

Source Code


<!DOCTYPE html>
<html>
<head>
<title>The Border Property</title>
<style>
h4{
border-style: solid;
}
p{
border-style: dashed;
}
ol{
border-style: double dashed;
}
</style>
</head>

<body>
<h4>BORDERS IN CSS</h4>

<p>This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.</p>

<ol>
<li>border-style</li>
<li>border-width</li>
<li>border-color</li>
<li>border-radius</li>
</ol>
</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: