You can set the color of borders:

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Example in html

Hello World

Hello World

Hello World

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Example in html

 Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values. 

CSS Backgrounds

CSS background-color

The background-color property specifies the background color of an element.

Example in html

Hello World!

This page has a light blue background color! 

With CSS, a color is most often specified by:

• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

Here, the and elements will have different background colors: 

Example in html

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

CSS Background Image

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example in html

Hello World!

This page has an image as the background!

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

Hello World!

Here, a background image is repeated only horizontally!

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

Hello World!

W3Schools background image example.

The background image is only showing once, but it is disturbing the reader!