Basics of CSS – Part #7
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:
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- 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:
- thin — approx. 1px
- medium — default value
- thick
- 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
Size: 3.25 KB
