The CSS border-image-outset property sets distance between an element’s border-image area and how far it goes beyond the element’s border-box.
.container {
border-style: ridge;
border-width: 3rem;
border-image-source: url('path/to/image.jpg');
border-image-slice: 70;
border-image-width: 40%;
border-image-repeat: repeat;
border-image-outset: 2;
}The CSS border-image-width property is used to determine the width of the border’s image file, as provided by the CSS border-image-source property.
.container {
border-style: ridge;
border-width: 3rem;
border-image-source: url('path/to/image.jpg');
border-image-slice: 70;
border-image-width: 40%;
border-image-repeat: repeat;
}The CSS border-image-slice tells the browser where to “slice” an image being used to create the pieces of an element’s borders.
.element {
border-style: ridge;
border-width: 3rem;
border-image-source: url('path/to/image.jpg');
border-image-slice: 30%;
border-image-repeat: repeat;
}The border-image-slice property is defined in …
The CSS border-image-repeat property controls how a border image is repeated to fill the outer edges of an element. It can also control the center of an element’s background when border-image-slice is set to fill.…
The border-image-source CSS property creates borders around elements using an image file or CSS gradient as the source.
.container {
border-width: 2rem;
border-style: dotted;
border-color: grey;
border-image-source: url('path/to/image.jpg');
border-image-repeat: repeat;
border-image-slice: 100;
}The :auto-fill pseudo-class in CSS allows us to style <input> elements that contain content auto-filled by the browser.
Take a new user registration form as an example. Have you ever clicked or tapped into a field and seen a dropdown …
The ::file-selector-button in CSS is a pseudo-element that selects <input type="file"> in HTML.
input::file-selector-button {
background-color: #f8a100;
}You’ve undoubtedly come across file upload inputs — they’re very common, especially for including file attachments in a form, like a PDF …
The :right pseudo-class in CSS is used with the @page at-rule to select all right-hand pages in a print document that contains multiple pages. That’s handy for setting margins on double-sided pages so that the pages on the “right” side …
The :left pseudo-class in CSS is used with the @page at-rule to select all left-hand pages in a print document that contains multiple pages. That’s handy for setting margins on double-sided pages so that the pages on the “left” side …
The :first CSS pseudo-class is used with the @page at-rule to select the first page in a printed document. It’s very similar to the way :first-child selector works to target the first child element in a parent container, but instead …
The print-color-adjust CSS property is sort of like a cost-cutting measure when it comes to printing a webpage. You know how you can literally print a webpage on a piece of paper? That’s what we’re talking about. By applying print-color-adjust…