A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source below:

border-image-source - CSS | MDN

border-image-source

Baseline Widely available

The border-image-source CSS property sets the source image used to create an element's border image.

Try it
border-image-source: url("/shared-assets/images/examples/border-diamonds.png");
border-image-source: url("/shared-assets/images/examples/border-stars.png");
border-image-source: repeating-linear-gradient(
  45deg,
  transparent,
  #4d9f0c 20px
);
border-image-source: none;
<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

The border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.

Syntax
/* Keyword value */
border-image-source: none;

/* <image> values */
border-image-source: url("image.jpg");
border-image-source: linear-gradient(to top, red, yellow);

/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;
Values
none

No border image is used. The appearance defined by border-style is displayed instead.

<image>

Image reference to use for the border.

Formal definition Formal syntax
border-image-source = 
none |
<image>

<image> =


<url> |
<gradient>

<url> =


<url()> |
<src()>

<url()> =


url( <string> <url-modifier>* ) |
<url-token>

<src()> =


src( <string> <url-modifier>* )
Examples Basic example
.box {
  border-image-source: url("image.png");
}
Specifications Browser compatibility See also

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4