Css background top border

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.

  Источник

  background-origin

  The background-origin CSS property sets the background’s origin: from the border start, inside the border, or inside the padding.

  Try it

  Note that background-origin is ignored when background-attachment is fixed .

  Syntax

  /* Keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* Global values */ background-origin: inherit; background-origin: initial; background-origin: revert; background-origin: revert-layer; background-origin: unset; 

  The background-origin property is specified as one of the keyword values listed below.

  Values

  The background is positioned relative to the border box.

  The background is positioned relative to the padding box.

  The background is positioned relative to the content box.

  Formal definition

  Initial value	padding-box
  Applies to	all elements. It also applies to ::first-letter and ::first-line .
  Inherited	no
  Computed value	as specified
  Animation type	a repeatable list of

  Formal syntax

  background-origin =
  #

  =
  border-box |
  padding-box |
  content-box

  Examples

  Setting background origins

  .example  border: 10px double; padding: 10px; background: url("image.jpg"); background-position: center left; background-origin: content-box; > 

  #example2  border: 4px solid black; padding: 10px; background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box; > 

  div  background-image: url("logo.jpg"), url("mainback.png"); /* Applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; > 

  Using two gradients

  In this example the box has a thick dotted border. The first gradient uses the padding-box as the background-origin and therefore the background sits inside the border. The second uses the content-box and so only displays behind the content.

  .box  margin: 10px 0; color: #fff; background: linear-gradient( 90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 0.6) 60%, rgba(252, 176, 69, 1) 100% ), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%); border: 20px dashed black; padding: 20px; width: 400px; background-origin: padding-box, content-box; background-repeat: no-repeat; > 

  Specifications

  Источник