Today we're going to continue our adventure about the box model. We covered the box model and the margin property but we still need to cover padding and border properties!

If we recall that margin > border > padding > content... Margins are always invisible, Borders can be any color we'd like them to be, and padding will be the same color as the background-color of the element.

Border Property

The border property defines the border around an element. Using this border property we can have a border around anything we'd like. We can have the following properties:

  1. border-top
    • border-top-color
    • border-top-style
    • border-top-width
  2. border-right
    • border-right-color
    • border-right-style
    • border-right-width
  3. border-bottom
    • border-bottom-color
    • border-bottom-style
    • border-bottom-width
  4. border-left
    • border-left-color
    • border-left-style
    • border-left-width
  5. border – all-inclusive

Consider the following code:

p.top-border {
     border-top-color:#ff9300;
     border-top-style:solid;
     border-top-width:1px;
}

So this would only apply to p elements with the class attribute of "top-border", we know that much! This particular element would have a top border of #ff9300 (Atomicpages orange!), a border-style of solid (there are no breaks or spaces), and a border width of 1px since we want it to be thin.

This is how it would look like if we tried this. The more we type the longer the border becomes. It almost appears as if the text above is really being underlined but this is the border-top property.

For every border property there exists a short-hand way of adding styles to our borders. We can very well type border-top-width, border-top-style, border-top-color every instance we want to use this. We know exactly what the border is doing without having to guess or anything. This can take time, however. We can shorten the example above by doing the following:

p.border-ex {border-top:width style color;} /*Syntax*/
p.top-border {border-top:1px solid #ff9300;}

This is far more efficient and a much faster way of adding border styles to our elements! It is more confusing and might take some time to get used to. If you're comfortable using the long-hand method then stick to what you're comfortable with. If you prefer short-hand methods then use those, bear in mind that the short-hand method does exist and it readily available.

border-width

The first value/property we should define in our border should be the width of our border. There are built in values that we can use or we can define our own. Here are the values we can have:

  1. thin — approx. 1px
  2. medium — default value
  3. thick
  4. px, em, pt, etc

This is a thin border, This is a medium border, This is a thick border,

This is a border with 15px as the value..

Why we would want a border with 15px is beyond me, but for the sake of this example it is fine.

border-style

There are a lot of styles for borders, here are the styles you can have:

Values Description
none Specifies no border
hidden Specifies a hidden border
solid A solid border
inset 3D inset border, effects depends on border-color value
outset 3D outset border, effects depends on border-color value
dotted a dotted border
dashed a dashed border
groove 3D groove border, effects depends on border-color value
double a double border

That is a lot of styles indeed! We won't go over every single style in this tutorial. I will, however, add a downloadable that will contain these styles! Note: the 3D style borders, it depends all on the color you pick. Some colors will look nice and some color will not look nice at all!

border-color

The border color property works the same as the background-color property. You can choose any color you would like your border to be. You may use built in colors (e.g. reg, green, blue), HTML Color Codes, or RGB Values to use your colors.

border-color:red; /*Color value*/
border-color:#ff9300; /*Hex Value*/
border-color:rgb(51, 255, 0); /*Decimal Value*/

All-Inclusive

The all-inclusive border property works the same as most other all-inclusive properties. It saves time but makes the code a little more confusing. The syntax you should use is like the following:

border:width style color;
border:1px solid #ff9300;

If you want to see these examples in action then click on the green download button below!

border.zip
border.zip
Size: 3.25 KB
Be Sociable, Share!