# borders
Objectives:
* Work with basic CSS borders.
## File Location
You should be located in the following files:
```
javascript-library
└── 0-PreWork
...
└── 2-CSS-Basics
└── 07-border.css
└── 07-border.html
```
To get started, let's stub out our `html` and `css` files.
```markup
Borders
Borders
The border property allows you to specify the style, width, and color of an element's border.
```
Then in the css file, set it up to look like this:
```css
/*
Border shorthand looks like this:
p{
border: 5px solid red;
}
The order is: border-width border-style(required)
border-color
*/
body{
background-color: lightblue;
}
.wrapper{
margin: 5px;
}
h1{
text-align: center;
}
#title-p{
text-align: center;
}
```
Notice, the comment about border css, that's the structure we'll be working with in the future.
## Border Styles
Let's start with our `border-style` `
`. Add the following `html` to our border-style divs.
```markup
Border Style
The border-style property can take up to four values (top border, right border, bottom border, and left border). The following border-style values are allowed:
dotted: dotted border
dashed: dashed border
solid: solid border
double: double border
groove: 3D grooved border, depends on border-color value
ridge: 3D ridged border, depends on the border-color value
inset: 3D inset border, depends on the border-color value
none: no border
hidden: hidden border
mixed: you can set a different border style for the top, bottom, right, and left
```
Let's look through these properties. Most of these are fairly self-explanatory here, so let's see this in action.
```css
.border-style li{
margin: 5px;
}
.border-style li:nth-child(1){
border-style: dotted;
}
.border-style li:nth-child(2){
border-style: dashed;
}
.border-style li:nth-child(3){
border-style: solid;
}
.border-style li:nth-child(4){
border-style: double;
}
.border-style li:nth-child(5){
border-style: groove;
}
.border-style li:nth-child(6){
border-style: ridge;
}
.border-style li:nth-child(7){
border-style: inset;
}
.border-style li:nth-child(8){
border-style: none;
}
.border-style li:nth-child(9){
border-style: hidden;
}
.border-style li:nth-child(10){
border-style: dotted dashed solid double;
}
```
Let's talk about this css, notice how they say:
```css
.border-style li:nth-child(10)
```
This is what we call a psuedo-class.
```css
selector:pseudo-class {
property:value;
}
```
`Psuedo classes` allow us to more easily style things. A pseudo-class is used to define a special state of an element. Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
`Nth-child` is a psuedo-class that matches one or more elements based on their position among a group of siblings.
So here we're using the nth-child psuedo class to identify each list item and style them independently. Check out all of the cool border styles, and how using psuedo-classes we can style them all specifically without needing to assign an id to each one.
## Border Widths
In the `border-width` div, let's fill in the following html:
```markup
Border Width
VERY IMPORTANT: border-width will not work unless you have border-style set!!
Border-width can be set to a specific size (px, em, etc) or you can use one of the following pre-set settings: thin, medium, thick. The border-width property can also take up to four values (top, right, bottom, left)
Here's an example of border-width being set to more than one value.
```
Important to note here, is that border-width will not work unless you have border-style set. Let's add some style to this, add the following to your css file.
```css
.border-width p{
border-style: solid;
border-width: 5px;
}
#four-widths{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
```
Hopefully you can see the differences in the two border widths after we apply our css. Notice the order of the widths described. This order, as always goes: top-right-bottom-left. Try drastically changing the widths of each side to see the changes.
## Border Colors
Let's talk about border color next, as you may expect it allows us to assign a color to our border. Let's add the following html to our `border-color` div.
```markup
Border Color
VERY IMPORTANT: border-color will not work unless you have border-style set!!
Border-color can be set by the following ways:
name: specify a color such as "blue"
Hex: specify a hex value, like "#eee"
RGB: specify a RGB value, like "rgb(100,100,100)"
transparent
```
Again, note that you need border-style to use border-color. Let's add some CSS to it, so that we can see it in action.
```css
/* 7 */
.border-color li:nth-child(1){
margin: 5px;
border-style: solid;
border-color: blue;
}
.border-color li:nth-child(2){
margin: 5px;
border-style: solid;
border-color: #eee;
}
.border-color li:nth-child(3){
margin: 5px;
border-style: solid;
border-color: rgb(100,0,100);
}
.border-color li:nth-child(4){
margin: 5px;
border-style: solid;
border-color: transparent;
}
```
Notice here, we're using the psuedo class nth-child again! This time you should be able to see the color differences between borders.
## Border Shorthands
As you see if we use all three properties, we're using three lines of css. Fortunately there is a shorthand way of using border and its properties. Let's look at the comment at the top of our css again. Notice how we can just do `border: 5px solid red` instead of `border-width: 5px`, `border-style: solid` and `border-color: red`.
```css
/*
Border shorthand looks like this:
p{
border: 5px solid red;
}
The order is: border-width border-style(required)
border-color
*/
```
Make sure your HTML and CSS files look like below.
HTML:
```markup
Borders
Borders
The border property allows you to specify the style, width, and color of an element's border.
Border Style
The border-style property can take up to four values (top border, right border, bottom border, and left border). The following border-style values are allowed:
dotted: dotted border
dashed: dashed border
solid: solid border
double: double border
groove: 3D grooved border, depends on border-color value
ridge: 3D ridged border, depends on the border-color value
inset: 3D inset border, depends on the border-color value
none: no border
hidden: hidden border
mixed: you can set a different border style for the top, bottom, right, and left
Border Width
VERY IMPORTANT: border-width will not work unless you have border-style set!!
Border-width can be set to a specific size (px, em, etc) or you can use one of the following pre-set settings: thin, medium, thick. The border-width property can also take up to four values (top, right, bottom, left)
Here's an example of border-width being set to more than one value.
Border Color
VERY IMPORTANT: border-color will not work unless you have border-style set!!