Free Coding Ebook 👉 Get Now

Background and Border Property in CSS

CSS Backgrounds

Elements’ backgrounds can be filled with a color or image, clipped and/or resized, and otherwise be modified.

CSS background properties:

background-color

background-image
background-repeat
background-attachment

background-position
Background Color

We can specify a background color for an element using the background-color property.

The value can be any valid CSS Color or CSS3 Color.

Changing the background color of a whole page:

body {
background-color: gold;
}

Changing the background color of elements:

h1 {
background-color: yellow;
}
p {
background-color: pink;
}
div {
background-color: gray;
width: 200px;
height: 200px;
}

Background Image

The background-image property sets one or more images as the background of an element.
The format of its value should be: url(“image.jpg”) . Single quotes and no quotes also work e.g. url(‘image.jpg’) and url(image.jpg)

The text contained in the quotes is file paths.

body {
background-image: url("images/clouds-bg.jpg");
}

Note: Don’t use any background color or image that will disturb the text on your web page. Always keep everything readable.

Background Image Repeat

CSS automatically resets background images horizontally and vertically.

Take a look at an example below.

body {
background-image: url("images/small-sunflower.png");
}

To only repeat the background image horizontally or vertically we can use the background-repeat property.

Horizontally-repeating background image.

body {
background-image: url("images/small-sunflower.png");
background-repeat: repeat-x;
}

Vertically-repeating background image.

body {
background-image: url("images/small-sunflower.png");
background-repeat: repeat-y;
}

Background Image – no-repeat

The no-repeat value of the background-repeat property stops a background image from repeating.

body {
background-image: url("images/small-sunflower.png");
background-repeat: no-repeat;
}

Background Image – Set Position

We can set the initial position of a background image using the background-position property.

Valid Values

top
bottom
left

right
center
combination of the ones mentioned above (top and bottom and left and right can’t be combined)
<percentage>

edge offset values
inherit
initial

unset

Background Attachment

The bacground-attachment property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

Valid Values:

scroll: background is fixed relative to the element itself and does not scroll with its contents.
fixed: background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element.

local: background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
scroll, local
local, scroll

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Background – Shorthand Property

We can specify all CSS background properties in one single property using its shorthand property.

The background property is a shorthand for the following CSS properties:

background-color

background-image
background-repeat
background-attachment

background-position

Example:

A CSS Background with the following properties…

body {
background-color: red;
background-image: url("images/small-sunflower.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

… can be shortened to:

body {
background: red url("images/small-sunflower.png") no-repeat fixed top right;
}

Note: You can ommit values. Ommited values will be set to their initial values.

CSS Borders

In CSS, we can decorate borders with lines, and make them square or rounded.

Restaurant Website Using HTML And CSS With Source Code

Border Style

The border-style CSS property sets the line style for all four sides of an element’s border.

Valid Values:

none: displays no border
hidden: displays no border

dotted: displays a series of rounded dots
dashed: displays a series of short square-ended dashes or line segments
solid: displays a single, straight, solid line

double: displays two straight lines
groove: displays a border with a carved appearance
ridge: displays a border with an extruded appearance

inset: displays a border that makes the element appear embedded
outset: displays a border that makes the element appear embossed

Example:-

p.none { border-style: none; }
p.hidden { border-style: hidden; }
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }

Border Width

We can specify the widths of an element’s borders using the border-width CSS property.

Valid Values:

thin: displays a thin border
medium: displays a medium border
thick: displays a thick border

<length>

Below is an example of using a <length> value.

Example:-

div {
border-width: 10px;
border-style: solid;
width: 250px;
height: 250px;
background: yellow;
}

Border Color

The border-color CSS property defines the color of a border.

Valid Value:

<color>

Example:-

div {
border-style: groove;
border-width: 5px;
border-color: magenta;
width: 250px;
height: 250px;
background: yellow;
}

CSS Borders – Individual Sides

In CSS, we can specify border styles, widths, and colors on each side (top, right, bottom, and left).

Interest Calculator using HTML, CSS and JavaScript

We can achieve this by using the following CSS properties.

border-top-style

border-right-style
border-bottom-style
border-left-style

border-top-width
border-right-width
border-bottom-width

border-left-width
border-top-color
border-right-color

border-bottom-color
border-left-color

Changing border style on each side example:

div {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: groove;
border-width: 5px;
border-color: red;
width: 250px;
height: 250px;
background: lightgrey;
}

Changing border width on each side example:

div {
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 20px;
border-color: red;
border-style: solid;
width: 250px;
height: 250px;
background: lightgrey;
}

Changing border color on each side example:

div {
border-top-color: blue;
border-right-color: red;
border-bottom-color: green;
border-left-color: gold;
border-style: solid;
border-width: 5px;
width: 250px;
height: 250px;
background: lightgrey;
}

CSS Border – Shorthand Property

The border CSS property sets an element’s border. It’s a shorthand for the following CSS properties:

border-width
border-style

border-color

As with all shorthand properties, any omitted sub-values will be set to their initial sub-value.

However, in this shorthand property the border-style’s value is required.

Order does not matter.

Example:-

{
border: 1px solid black;
width: 250px;
height: 250px;
background: lightgrey;
}

CSS Borders – Specifying Values

The border-style,border-width and border-color CSS properties can have one, two, three or four values.

15+ Amazing HTML CSS Progress Bars [ Demo + Code ]

One Value

When one value is specified, it applies the same style, width or color to all four sides.

div {
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with one value */
#style {
border-style: dashed;
border-width: 10px;
border-color: red;
}
/* border-width with one value */
#width {
border-style: solid;
border-width: 10px;
border-color: red;
}
/* border-color with one value */
#color {
border-style: solid;
border-width: 10px;
border-color: red;
}

Two Values

When two values are specified, the first styles, widths or colors apply to the top and bottom, the second to the left and right.

div {
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with two values */
#style {
border-style: dotted dashed;
border-width: 10px;
border-color: red;
}
/* border-width with two values */
#width {
border-style: solid;
border-width: 10px 15px;
border-color: red;
}
/* border-color with two values */
#color {
border-style: solid;
border-width: 10px;
border-color: red green;
}

Three Values

When three values are specified, the first styles, widths or colors apply to the top, the second to the left and right, the third to the bottom.

div {
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with three values */
#style {
border-style: groove dotted dashed;
border-width: 10px;
border-color: red;
}
/* border-width with three values */
#width {
border-style: solid;
border-width: 10px 15px 10px;
border-color: red;
}
/* border-color with three values */
#color {
border-style: solid;
border-width: 10px;
border-color: blue red green;
}

Four Values Example:

When four values are specified, the styles, widths, or colors apply to the top, right, bottom, and left in that order (clockwise) respectively.

div {
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with four values */
#style {
border-style: solid dashed solid dashed;
border-width: 10px;
border-color: red;
}
/* border-width with four values */
#width {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
}
/* border-color with four values */
#color {
border-style: solid;
border-width: 10px;
border-color: blue red green gold;
}

Note: The border property increases elements’ outer size except <table> and <td> elements.

Age Calculator Using HTML,CSS and JavaScript

For instance, an element with a width and height of 20px and a border of 5px will have an outer width and height of 30px (20px width + 5px border-left-width + 5px border-right-width = 30px outer width).

Thanks For Reading!