Css box with background

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.

  Источник

  CSS3 Borders, Backgrounds and Boxes

  In this article, we will showcase some examples made using the new properties in the W3C’s CSS3 Backgrounds and Borders specification. We recommend using Opera 11 or later to view these examples in their full glory.

  background-clip

  The first CSS3 property that we’ll introduce is background-clip . This property is used to determine whether the background image extends into the border or not.

  There are two options, the default border-box and padding-box . When border-box is used, the background image will extend to the border and will therefore show up behind the border, as in Figure 1. The other option is padding-box which means the background image won’t stretch to the border. The image will simply appear until the edge of the padding, as shown in Figure 2.

  

  By defining the background images in order, they overlap each other. The W3C spec says:

  The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers. Note that the border-image properties can also define a background image, which, if present, is painted on top of the background created by the background properties.

  You can view the multiple background image example here. The results can be seen in figure 8.

  

  background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat, url(fieldsky.jpg) no-repeat; 

  Example 2

  Alternatively, you can use the background-image property to create a background with multiple images.

  In this second example we show you how to create the sliding doors technique using only background-image . This time there’s no need for extra nested blocks. Together with background-repeat and background-position , Patrick Lauke shows us how sliding door buttons are created using multiple background images.

  

  background-image:url(left.png), url(right.png), url(main.png); background-repeat:no-repeat, no-repeat, repeat-x; background-position:left top, right top, left top; 

  background-attachment

  The background-attachment property determines if a background image is fixed or scrolls with the rest of the page. It happens when we define how a background image is attached to a viewport. Background images can be fixed to a viewport or can scroll along with the element or with its contents via local .

  See Vadim Makeev’s background-attachment demo. He has created three sections to demonstrate how fixed , scroll and local are affected when we scroll the viewport and the full document.

  

  The local value for background-attachment is new in the W3C’s CSS3 border and background specification. At the time of writing, it is not yet supported in public releases of Firefox.

  Updated background shorthand

  Starting with Opera 11, it is possible to specify the new CSS3 background properties in the background shorthand. This includes background-size , background-clip and background-origin .

  There are a few things to be aware of when using the new background shorthand. If only one box value is specified both background-clip and background-origin are set to this value. If two are specified then the first is used for the origin and the second is used for the clip. As both background-position and background-size accept length and percentage values, a forward slash / needs to be present before the first background-size value. Finally, if specifying multiple background images, only the final image can specify a background-color .

  In the following demo the background shorthand has been used to specify three images to illustrate the CSS box model. All values have been specified, even if they are the same as the default, to show how they can be defined. Each image has a different background-origin to place the image in the border box, padding box and content box respectively.

  

  The background shorthand used is as follows:

  background: url(content.svgz) no-repeat left top / 200px 70px scroll content-box content-box, url(padding.svgz) no-repeat left top / 240px 110px scroll padding-box padding-box, url(border.svgz) no-repeat left top / 280px 150px scroll border-box border-box white; 

  box-shadow

  Box shadow allows shadow effects on elements. This property takes several values:

  • The first value indicates the horizontal offset of the shadow. You can use a negative value to put the shadow to the left of your box.
  • The second value indicates the vertical offset. You can use a negative value to put the shadow above your box
  • The third value is the blur radius. The bigger the value, the more blurred it is.

  Additionally, you can give the shadow color , spread and offset values. Let’s look at some examples:

  

  The box-shadow property only works on Gecko and WebKit with a -moz- and -webkit- prefix, respectively.

  box-decoration-break

  When laying out content in CSS, boxes can be broken into two or more pieces in a number of ways; in paged media such a print content is broken into page boxes when an element flows onto another page, when using CSS Multi-column layout a box is broken when flowing from one column to the next, and for inline elements an inline box is broken into line boxes when flowing from one line to the next.

  The box-decoration-break property allows you to define how these boxes behave. The slice value is the default value and behaves as if you do not specify the property or it is not supported. Properties such as border-radius , box-shadow , border and padding are not applied where the box breaks. The edge will be straight as if there was no special decoration, almost as if you cut the box cleanly into pieces, and places the pieces in position, such as the next line, page or column. See figure 13 for a visual demonstration of inline blocks with box-decoration-break:slice applied.

  

  The clone value applies the padding , border , border-radius , -o-border-image and box-shadow to each box independently. This means that where the box breaks, such as at the start and end of a line, the border , border-radius and so on will be drawn, so that it looks like each box is its own element. If a background image is applied and set to no-repeat , it will be drawn once for each box See figure 14 for a visual demonstration of inline blocks with box-decoration-break:clone applied.

  

  Check out the box-decoration-break demo in Opera 10.60 or above to see this in action.

  border-radius

  The highly-awaited border-radius has arrived! We can now create rounded corners for our elements, just like the ones below.

  border-radius is the shorthand for:

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

  Let’s dive into some examples.

  

  Opera 11.50 requires the -o- prefix for border-image . While the CSS3 Backgrounds and Borders module is fairly stable, the border-image spec has changed substantially since we implemented it (including becoming a short hand for a number of individual border-image properties). As such we introduced the vendor prefix until the implementation matches the new spec. It is no longer supported prefixless at the time of writing. WebKit and Gecko also currently require their respective prefix.

  Conclusion

  We hope you enjoyed reading and trying out these new CSS3 implementations. They run in Opera 11+, and other standards-aware browsers.

  Credit goes to Daniel Davis and Patrick Lauke for their wonderful demos, and David Storey for his suggestions, ideas, and updating this article for the new features found in Opera 11.

  Read more

  Copyright © 2006—2022 Opera Software AS. Some rights reserved. Contribute!

  Источник