Background and Border

Background and Border Property in CSS

Background and Border Property in CSS

css background border

Ā 

Ā 

CSS’s background property allows designers to set the backdrop of a webpage, enabling the inclusion of colors, images, and positioning for a visually appealing design to background properties in CSS project.

Meanwhile, the border property is the go-to tool for establishing clear visual boundaries around elements. It covers aspects like border width, style, and color, enhancing the overall structure of the webpage.

In the realm of web design, these properties are like an artist’s palette, offering the means to infuse creativity and personality into the user interface. Whether it’s crafting a captivating background or defining sleek borders, these properties empower designers to create engaging and stylish web experiences.

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;
}

Ā 

ADVERTISEMENT

Background Image – Set Position

ADVERTISEMENT

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

ADVERTISEMENT

Valid Values

ADVERTISEMENT

  • 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

ADVERTISEMENT

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.
Ā 
Ā 

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!

FAQs:-

How to create a background property is a shorthand for the following CSS properties

The background property is a shorthand for the following CSS properties:-
background-color
background-image
background-repeat
background-attachment
background-position
Here is code:-
body { background: red url("images/small-sunflower.png") no-repeat fixed top right; }

How to change border colour ?

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; }



Tags:

Leave a Reply