Css backgrounds and borders

Other background-image syntax

Allows the use of any element, including where images can be used.

background-image: -moz-element('#someID'); background-image: element('#someID')

Define which portion of the image to show:

background-image: -moz-image-rect(url(ico_sprite.jpg), 32, 64, 16, 16); background-image: image('ico_sprite.jpg#xywh=32,64,16,16')

Unsupported Syntax (future!!)

Fallback in case your images doesn’t load:

background-image: image("try1.svg", "try2.png", "try3.gif", blue)

Flip the image if the direction is rtl.

background-image: image("arrow.png" rtl)

background-image

background-image: url(myGif.gif), url(otherGif.gif); background-image: none; background-image: linear-gradient(top, red, blue); background-image: url(data:image/gif;base64,fOulrShEAAQ. ); background-image: url("data:image/svg+xml;utf8,"); background-image: element('#myID'); background-image: image('ico_sprite.jpg#xywh=32,64,16,16'); background-image: image("try1.svg", 'try2.png' , "try3.gif");

Browser Support

Feature	/ Browser Firefox	Chrome	Internet Explorer	Opera	Safari
Basic support	1	1	4	3.5	1
Multiple backgrounds	3.6	1	9	yes	1.3
Gradients (prefixed)	3.6	1	11+	4
Gradients	16	10	26	12.1	6.1
SVG images	4	8	9	9.5	5
element()	-moz
image()	-moz-image-rect()

background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;

repeat Tiled as often as needed to cover background no-repeat Placed once, not tiled or repeated repeat-x Tiled along X axis only (Equivalent to repeat no-repeat) repeat-y Tiled along Y axis only (Equivalent to no-repeat repeat) space Repeated as often as will fit without being clipped, spaced out evenly round Repeated as often as will fit without being clipped then scaled so no space in between

background-repeat: no-repeat;

background-attachment

background-attachment: fixed | local | scroll

background-attachment: scroll

Filet mignon kielbasa pork chop short ribs short loin shank hamburger. Bresaola hamburger venison shankle pork andouille. Pastrami venison andouille pancetta sausage chicken biltong. Tri-tip jerky short loin tenderloin pork chop. Shoulder frankfurter turkey ribeye, jowl tail leberkase brisket sausage boudin ham hock shankle ground round short loin.

% based background-position (old )

background-position

New in CSS3: Positioning relative to any corner

background-position: right 50px bottom 50px;

4-value background-position

background-clip

 background-clip: border-box | padding-box | content-box

• Chrome
• Safari
• Firefox 4
• Opera
• IE 9
• add -moz- for FF 3.6 and earlier

background-origin

 background-origin: border-box | padding-box | content-box

• Chrome
• Safari 5.1
• Firefox 4
• Opera
• IE 9
• add -moz- for FF 3.6, -webkit- for Safari 5

background-clip / background-origin

background-size

background-size: auto | contain | cover |

• Use for creating gradients backgrounds
• Needed for hiDPI images
• ‘contain’ grows/shrinks to fully fit
• ‘cover’ grows to min size that covers 100% of height & width

• Chrome
• Safari
• Firefox 4
• Opera 11
• IE 9
• add -moz- for FF 3.6 and earlier

background-size

 background-size: auto | contain | cover | 100px 200px

background shorthand

background: img position / size repeat attachment origin clip, img position / size repeat attachment box bgcolor;

background: url(topImg.jpg) 0 0 / 30px 30px repeat scroll border-box content-box, url(botImg.jpg) 15px 15px / 30px 30px fixed border-box #609;

DO NOT USE BACKGROUND SHORTHAND.

• Border properties & browser support
• If one ‘box’ value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’

Border properties

border-color

border-color: white; border-color: #fff; border-color: #FFFFFF; border-color: rgb(255,255,255); border-color: rgb(100%,100%,100%); border-color: rgba(255,255,255,1); border-color: rgba(100%,100%,100%, 1); border-color: hsl(0, 100%, 100%); border-color: hsla(0, 100%, 100%, 1); border-color: transparent; border-color: currentColor; /* default */

border-style

• Up to 4 values (TRouBLe)
• Old Webkit browsers ignored color for groove, inset, outset & ridge. Fixed!
• IE6 & IE7 do not understand ‘hidden’, and inherit.

none No border. As if border-width: 0; except with border-image hidden Same as none, but relevant in border-collapsed tables dotted Round dots. dashed Square-ended dashes. solid a single solid line. double Two parallel solid lines. Only relevant if border-width >= 3px. line + space + line = border-width value. groove Shadow effect using two colors on each side, with a slightly lighter and darker than the border-color value. Top / left half of each side darker. ridge Looks as if it were coming out of the canvas. Bottom / Right darker inset Looks sunken into page. Top and left border are made darker, bottom and right are lighter.. Treated as ridge in border-collapsed tables. outset Looks as if popping out of page. Bottom and right are darker. Top and left border are lighter.. Treated as groove in border-collapsed tables.

border-width

border-width: (length) | thin | medium | thick | inherit ;

border shorthand

border-left: width style color;

border-top: 5px dashed rgba(217,68,11, 0.8);

• style is REQUIRED.
• width defaults to medium
• color defaults to currentColor
• IE up to 8 is buggy

border-radius

• Chrome / Chrome 4
• Safari 3 / Safari 5
• Firefox 1 / Firefox 4
• Opera 10.5
• IE 9

border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

• -moz- prefix for 3.6 and earlier
• longhand syntax in FF3.6
• % works since Safari 5.1 and FF 4.0

Источник

CSS backgrounds and borders

The CSS backgrounds and borders module provides properties for adding borders, rounded corners, and box shadows to elements.

You can add different types of border styles, including borders made of images of any image type, from raster images to CSS gradients. Borders can be square or rounded, and a different radius can be set for each corner. Elements can be rounded whether or not they have a visible border.

Box shadows include inset and outset shadow, single or multiple shadows, and solid or allowed to fade to transparent. An outer box-shadow casts a shadow as if the border-box of the element were opaque. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The shadow can be solid or include a spread distance with the shadow color transitioning to transparent.

The properties in this module also let you define whether cells inside a should have shared or separate borders.

Backgrounds, borders, and box shadows in action

This sample of borders, backgrounds, and box shadows consists of centered background images made of linear and radial gradients. A series of box shadows make the border appear to «pop». The element on the left has a border image set. The element on the right has a rounded dotted border.

The background images are defined with background-image . The images are centered with background-position . Different values of the background-clip property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the border-image and the dotted border . The rounded corners in the element on the right are created using the border-radius property. A single box-shadow declaration is used to set all the shadows, both inset and outset.

To see the code for this sample, view the source on GitHub.

Reference

Properties

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background shorthand
• background-position-x Experimental
• background-position-y Experimental
• background-position-inline Experimental
• background-position-block Experimental
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-bottom shorthand
• border-left-color
• border-left-style
• border-left-width
• border-left shorthand
• border-right-color
• border-right-style
• border-right-width
• border-right shorthand
• border-top-color
• border-top-style
• border-top-width
• border-top shorthand
• border-color shorthand
• border-style shorthand
• border-width shorthand
• border shorthand
• border-collapse
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius
• border-radius shorthand
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image shorthand
• box-shadow

Data types

Guides

Explains how to implement decorative images using CSS background images.

Explains how to set one or more backgrounds on an element.

Describes how to change the size and repeating behavior of background images.

Explains how borders, along with other box model properties, impact the CSS box model.

Explains how to create CSS gradient background images.

Related concepts

• border-block-end-color property
• border-block-start-color property
• border-inline-end-color property
• border-inline-start-color property
• border-block-end-style property
• border-block-start-style property
• border-inline-end-style property
• border-inline-start-style property
• border-block-end-width property
• border-block-start-width property
• border-inline-end-width property
• border-inline-start-width property
• border-start-start-radius property
• border-start-end-radius property
• border-end-start-radius property
• border-end-end-radius property
• box-sizing property
• box-decoration-break property
• text-shadow property
• url() CSS function
• data type
• data type
• data type
• currentcolor keyword

Specifications

See also

• Interactive tools that let you visually create borders images, rounded corners, and box shadows:
  • Border-image generator
  • Border-radius generator
  • Box-shadow generator

  Found a content problem with this page?

  This page was last modified on Jul 17, 2023 by MDN contributors.

  Your blueprint for a better internet.

  Источник