Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

# The `border` property

The border surrounds an element between the padding and margin. We can use it to draw an edge around an element. We use the `border-width`, `border-style`, and `border-color` properties to define our `border`.


## Border width

The `border-width` property defines the border’s thickness.

```css
p {
  border-width: 2px;
}
```

Alternatively, we could set each edge (top -> right -> bottom -> left) separately, like so:

```css
p {
  border-width: 2px 1px 2px 1px;
}
```

We can also use the following values:
- The `thin` value is `1px`
- The `medium` value is `3px`
- The `thick` value is `5px`

We can also use `em`, `rem`, percentages, or any other CSS unit value.


## Border style

The `border-style` property specifies the type of line for our border.

There are many different values we can use:

- The `none` value is the default (no border is displayed).
- The `solid` value designates a solid line.
- The hidden value says that a line has been drawn but isn’t set to visible. It could be used to add some extra width without displaying a border.
- The `dashed` value designates a dashed line.
- The `dotted` value designates a dotted line.
- The `double` value draws two straight lines around the element. 
- The `groove` value displays a border with a carved appearance. This makes the element look pressed into the page.
- The `ridge` value is the opposite of `groove`, producing a raised effect.
- The `inset` value makes the element appear embedded.
- The `outset` value is the opposite of `inset`, producing an embossed effect.

Multiple `border-style` values can be combined. For example:

```css
p {
  border-style: none dashed solid dashed;
}
```

This example gives `p` no top border, a dashed right border, a solid bottom border, and a dashed left border.

## Border color

The `border-color` property defines the border’s `color`. Any valid color can be passed to this value. If we don’t set a color, the border will default to the color of the text in the element.

```css
p {
  border-color: red;
}
```

We could also select the color of each edge (top -> right -> bottom -> left) separately, as shown below:

```css
p {
  border-color: red green yellow blue;
}
```

## Applying borders to specific sides

If we want to apply properties to individual sides, we can specify the side in the following way:

- `border-top`
- `border-right`
- `border-bottom`
- `border-left`

And to style each side individually, we can approach it in a similar way:

- `border-top-width`
- `border-top-style`
- `border-top-color`
- `border-right-width`
- `border-right-style`
- `border-right-color`
- `border-bottom-width`
- `border-bottom-style`
- `border-bottom-color`
- `border-left-width`
- `border-left-style`
- `border-left-color`

## The `border` shorthand

Thankfully we can set these properties all at once using the `border` shorthand. The syntax is structured in the following way:

```css
border:  <border-width> <border-style> <color>
```

For example, if we want a `solid red` `border` that is `5px` in thickness around our element, then the code should look like this:

```css
border: 5px solid red;
```

> **Note:** When using the shorthand method, individual sides can’t be set to different lengths.

# Example

Learn all about how to place borders around elements.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Borders

The `border` property

Border width

Borders

The border property

Border width

The `border` property