Sets how and if a background image will repeat itself. Syntax /* background-repeat: repeat-x; */ Values repeat-x Repeats horizontally. repeat-y Repeats vertically. repeat Repeats both vertically and horizontally.

Specifies the size of a background image. Syntax /* background-size: 75% 50%; */ Values auto The background image will be displayed in its original size. percentage The background image will be a percentage of its width and height, as specified. contain The background image will be resized to make it fully visible.

The border property is shorthand for border-width, border-style (required), and border-color (in that order). Syntax If border-color is not set, the color of the border will be the color of the text of the element. /* wrap <code> tags inside <pre> tags to create code blocks like this */ Values border-width Sets the width of […]

With border-bottom, you can set the style of the bottom border. Syntax /* border: double; */ Values border-bottom-width Sets the width of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-color Sets the color of the bottom border

Sets a color only for the bottom border. Syntax Explicitly sets the color for the bottom border. Unless it’s been set by a previous CSS rule, it is required to also set the border-bottom-style and the border-bottom-width so that this rule can have a visual effect. /* explicit color values: */ border-bottom-color: #3c6fcc; border-bottom-color: blue; […]

sets the radius (or radiuses) based on which the bottom-left corner is rounded. Syntax The border-bottom-left-radius defines the rounding of the bottom-left corner. If the value is set to 0 (the default value), the corner will be a square, if one value is used, the corner will be rounded based on a circle with that […]

sets the radius (or radiuses) based on which the bottom-right corner is rounded. Syntax The border-bottom-right-radius defines the rounding of the bottom-right corner. If the value is set to 0 (the default value), the corner will be a square, if one value is used, the corner will be rounded based on a circle with that […]

Sets the styling of the bottom border for the element. Syntax border-bottom-style sets the style of the bottom border as one of the predefined values. The list of possible values is: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit. /* setting the bottom border to be dotted */ border-bottom-style: dotted; /* […]

Sets the width of the bottom border. Syntax The border-bottom-width property defines the width of the bottom border. It can use one of the predefined values (medium, thin, thick) or a length unit. /* Using a length value */ border-bottom-width: 0.2em; border-bottom-width: 3px; /* using a predefined value */ border-bottom-width: thin; border-bottom-width: thick; /* using […]

This property sets whether neighboring borders in a table should collapse in a single border or to be separated. Syntax The border-collapse property has two possible effective values – whether the borders should be separated and based on each cell individually, or whether borders that in the same intercellular space should collapse into a single […]

The border-color is a shorthand CSS property that sets the color of the element’s borders. Syntax This property can have anywhere from one to four values, similar as with other shorthand CSS properties. If one value is used, that value is applied on all sides, with two values, the first value is for the top […]

The border-image property allows for an image to be used as the border around the element. Syntax The border-image property is a shorthand CSS property for setting border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. This property can have anywhere from one to all five values set. /* setting the border-image-source to be the border-image.png file, with […]

border-image-outset sets the amount by which the border image should be able to extend outside of the border box. Syntax The border-image-outset can have anywhere from one to four values set. Each of those values belongs to the top, right, bottom and left sides. Similar as with other properties that cover multiple sides, if one […]

Specifies if the border image should be set to be rounded, repeating, spaced or stretched. Syntax The border-image-repeat can be set to one of the stretch, repeat, round or space values. Two values can also be used if we want to have different values set respectively for the horizontal and vertical border-image-repeat properties. /* One […]

The border-image-slice property defines how the image set as the border-image-source is going to be sliced to create the new border based on that image. Syntax The border image is sliced into 9 total regions, out of which 4 are corner regions, 4 are the top, right, bottom and left edges and there is one […]

This property defines which image should be used as a basis for creating an element’s border image. Syntax The image specified by border-image-source is split into 9 regions (see border-image-slice) which are then used to create the final border-image. /* Specifying a path to an image to be used as a border-image */ border-image-source: url("border-image.png"); […]

This property defines the width of the border-image. Syntax As with other width properties, a length unit or percentages can be used. A plain number can be used as well, which will represent a multiplication factor of the respective border-width. Percentages refer to the width and height of the border image area for horizontal and […]

This property is a shorthand that sets the inline border properties. Which borders are considered inline depends on the element’s directionality, writing mode and text orientation. Syntax This shorthand sets the border-inline-color, border-inline-style and border-inline-width properties. /* Setting values can be done in any order and any value can be omitted: */ border-inline: 1px solid […]

This property defines the colors of the inline borders of the element. Which borders are considered inline depends on the element’s directionality, writing mode and text orientation. Syntax This property accepts any color value and sets it to the inline borders. /* Setting a value can be in any color format: */ border-inline-color: rgba(243, 193, […]

This is a shorthand property that sets the inline end border’s property values. Which border is considered the inline end border depends on the element’s directionality, writing mode and text orientation. Syntax A shorthand that sets the values for the border-inline-end-color, border-inline-end-style, border-inline-end-width properties. The values can be specified in any order. /* Values can […]

This property defines the color of the inline end border of the element. Which border is considered the inline-end border depends on the element’s directionality, writing mode and text orientation. Syntax The border-inline-end-color property accepts any color value. /* Any type of color value can be used: */ border-inline-end-color: red; border-inline-end-color: #8f8fff; border-inline-end-color: rgba(34, 128, […]

This property defines the line style of the inline end border. Which border is considered the inline end border depends on the element’s directionality, writing mode and text orientation. Syntax One of the following styles are accepted: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. /* Setting the style to be dashed */ […]

This property defines the width of the inline end border. Which border is considered the inline end border depends on the element’s directionality, writing mode and text orientation. Syntax This property accepts one of the keyword values: thin, medium or thick. Other than these, it can also accept any length value. /* Setting the inline […]

This is a shorthand property that sets the inline start border’s property values. Which border is considered the inline start border depends on the element’s writing mode, directionality and text orientation. Syntax A shorthand that sets the values for the border-inline-start-color, border-inline-start-style, border-inline-start-width properties. The values can be specified in any order. /* Values can […]