This property defines the color of the top border of the element. Syntax This property accepts any color value. /* Setting a value can be in any color format: */ border-top-color: rgba(243, 193, 56, 0.6); border-top-color: green; border-top-color: #ef33ff Values color Any color value can be used. initial Global CSS keyword – this sets the […]

sets the radius (or radiuses) based on which the top-left corner is rounded. Syntax The border-top-left-radius defines the rounding of the top-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 top-right corner is rounded. Syntax The border-top-right-radius defines the rounding of the top-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 […]

This property defines the line style of the top border of the element. Syntax One of the following styles are accepted: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. /* Setting the style to be dashed */ border-top-style: dashed; Values none No border will be used, this is the default value. hidden Same […]

This property defines the width of the top border of the element. 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 top border to be thick */ border-top-width: thick; /* Setting a length value: */ border-top-width: 4px; border-top-width: […]

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.