This property is a shorthand that sets the width of the borders of an element. Syntax border-width is a shorthand that sets the border-top-width, border-right-width, border-bottom-width and border-left-width properties. Anywhere from one to four values can be used with this shorthand. Each value sets the top, right, bottom and left values respectively. If the third […]

The bottom property is used to set the vertical position on elements that have the position set to relative, fixed, absolute, or sticky. It has no effect on elements that are not positioned. Syntax If the element’s position is set to absolute or fixed, the bottom property sets the bottom of the element to a […]

When the box for the element is fragmented, the box-decoration-break property designates how the background, padding, border, border-image, box-shadow, margin, and clip-path is applied. Syntax Example: div.ex { box-decoration-break: clone; } Values slice Default value. Box decorations are applied as a whole and break at the edges of the element fragments. clone Box decorations are […]

The box-shadow property adds one or more shadows to an element. Syntax Example: div.ex { box-shadow: 3px 30px #e1e1e1; } Values none Default value. No shadow. h-offset (Required) Sets the positive (right) or negative (left) horizontal offset of the shadow. v-offset (Required) Sets the positive (right) or negative (left) vertical offset of the shadow. blur […]

The box-sizing property designates how the width and height of an element should be calculated: including padding and borders, or not. Syntax Example: div.ex { box-sizing: border-box; } Values content-box Default value. The width, height, and min/max properties includes only the content. border-box The width, height, and min/max properties includes the content, padding, and border. […]

The break-after property designates whether or not a break in a page, column, or region should happen after the specified element. Syntax With this property the browser can be told to avoid breaks after the specified element, or to break the page, column, or region after the element this property is applied to. /* wrap […]

The break-before property designates whether or not a break in a page, column, or region should happen before the specified element. Syntax With this property the browser can be told to avoid breaks before the specified element, or to break the page, column, or region before the element this property is applied to. h1 { […]

The break-inside property designates whether or not a break in a page, column, or region should happen inside the specified element. Syntax With this property the browser can be told to avoid breaks inside images, code snippets, tables, and lists. p.ex { break-inside: avoid; } Values auto Default value. All breaks inside the element are […]

The caption-side property designates where a table caption is placed. Syntax Example: .one { caption-side: top; } .two { caption-side: bottom; } Values top Default value. The caption is placed above the table. bottom The caption is placed below the table. initial Sets the property to its default value. inherit Inherits this property’s value from […]

The caret-color property designates the color of the caret (cursor) in inputs, textareas, or any other editable element. Syntax Example: textarea.ex { caret-color: #0000ff; } Values auto Default value. The browser uses the currentColor. color Designates the color of the caret using CSS color values. initial Sets the property to its default value. inherit Inherits […]

The clamp() CSS function let’s you define a range of values for the property of an element. It’s especially useful in responsive layouts when used in conjunction with relative units like vw and vh. Syntax clamp() uses 3 parameters: a minimum, preferred, and maximum value. /* propery: clamp(min, pref, max); */ width: clamp(100px, 6vw, 200px); […]

The clear property controls how elements next to floated elements should flow. Syntax This property designates what should happen with an element that is next to an element that has a float set. img.ex { float: left; } img.ex::after { clear: left; } Values none Default value. The element is not pushed below floated elements. […]

The clip-path property enables you to clip and element to a basic shape or to an SVG source. Syntax Example: img.ex { clip-path: ellipse(60%); } Values clip-source Specifies a URL to an SVG <clipPath> element. basic-shape Clips the element to a basic shape (circle, ellipse, polygon, or inset). margin-box The margin box is used as […]

The color property designates the color of text, using CSS color values. Syntax Example: div.one { color: blue; } div.one { color: #0000FF; } div.one { color: rgb(0,0,255); } Values color Designates the color of text using CSS color values. initial Sets the property to its default value. inherit Inherits this property’s value from its […]

The column-count property designates the amount of columns an element will be divided into. Syntax Example: div.ex { column-count: 4; } Values number The amount of columns that the content within the element will be flowed into. auto Default value. Other properties, like column-width, for instance, will determine the number of columns. initial Sets the […]

The column-fill property designates how columns should be filled, balanced or not. Syntax Adding a height to a multi-column element allows you to control how the content fills the columns. Content can be balanced or filled sequentially. div.ex { column-fill: auto; } Values balance Default value. About the same amount of content fills each column, […]

The column-gap property designates the gap between columns. Syntax If a column-rule is specified, it will display in the middle of the gap. div.ex { column-gap: 25px; } Values length Designates the length of the gap between columns. normal Default value. Designates a normal gap between columns. initial Sets the property to its default value. […]

The column-rule property is shorthand for column-rule-width, column-rule-style, and column-rule-color. Syntax This property sets the width, style, and color of the rule between columns, If column-rule-color is omitted, the color of the text is applied. div.ex { column-rule: 3px groove #e1e1e1; } Values column-rule-width Designates the width of the rule between columns. Default value is […]

The column-rule-color property designates the color of the rule between columns. Syntax Example: div.ex { column-rule-color: #e1e1e1; } Values color Designates the color of the rule using CSS color values. initial Sets the property to its default value. inherit Inherits this property’s value from its parent item.

The column-rule-style property designates the style of the rule between columns. Syntax Example: div.ex { column-rule-style: solid; } Values none Default value. No rule will be used. hidden Specifies a hidden rule. dotted The rule will be dotted. dashed The rule will be made of dashes. solid The rule will be solid. double Designates a […]

The column-rule-width property designates the width of the rule between columns. Syntax Example: div.ex { column-rule-width: 15px; } Values medium Default value. Sets a medium-width rule. thin Sets a thin-width rule. thick Sets a thick-width rule. length Designates the width of the rule in length units. initial Sets the property to its default value. inherit […]

The column-span property designates the amount of columns an element should span across. Syntax Example: h3 { column-span: all; } Values none Default value. Only one column is spanned across. all The element will span across all columns. initial Sets the property to its default value. inherit Inherits this property’s value from its parent item.

The column-width property designates the column width. Syntax The width is more of a “minimum width suggestion” for the browser. If at least two columns cannot fit at the designated width then the browser will drop the content into a single column. div.ex { column-width: 150px; } Values auto Default value. The browser determines the […]

The columns property is shorthand for column-width and column-count, in that order. Syntax Example: div.ex { columns: 150px 4; } Values auto Default value. Both the column-width and the column-count are set to “auto”. column-width Designates the minimum column width. column-count Designates the maximum amount of columns an element will be divided into. initial Sets […]