My Blog

The caret-color property specifies the color of the insertion caret (cursor). It is a thin vertical line, which is easily noticeable due to its flash. By default, this caret is black. However, the caret-color property allows applying any color to the caret. Initial Value auto Applies to All elements. Inherited Yes. Animatable No. Version CSS3 DOM Syntax…

The caption-side property defines the place of HTML <caption> element, used on HTML tables. The <caption> tag is used to give a title for a table. The title (caption) of the table can be placed at the bottom or at the top of the table. This property has two standardized values: top and bottom. The “top” value defines that the…

The break-inside is a CSS property which defines how any break (page, column) should behave within the generated box. This property is ignored when the generated box is not specified. It has four values: auto, avoid, always, all. Each element boundary is touched by the three properties below: Apply the rules below, to decide if a break…

The break-before is a CSS property which defines how any break (page, column) should behave before the generated box. If the generated box is missed, the property is ignored. It has four values: auto, avoid, always, all. You cannot use the break-after property on absolutely positioned elements or on an <div>. The page-break-inside, page-break-after and page-break-before properties help to define how a document…

The break-after is a CSS property which defines how any break (page, column) should behave after the generated box. It has four values: auto, avoid, always, all. Inside a multicol container, which was inside a page container would force a column and page break. Each element boundary is touched by the three properties below: Apply the rules…

The box-sizing property defines the calculation of the width and height of an element, if they include padding and borders. The box-sizing property is one of the CSS3 properties. The width and height of an element, by default, is calculated like this: So, when the width and height of an element is defined, the element often appears bigger than it was set (because the element’s border and padding are added to the element’s specified width…

The box-shadow property allows to add multiple shadows around the box specifying values for color, size, blur, offset and inset. The box-shadow property is one of the CSS3 properties. You can add effects separated by commas. If you specify a border-radius on the element with a box shadow, the box shadow will take the same rounded corners. These are two values that…

The box-decoration-break is a CSS property which specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element are set when the box is fragmented. The box-decoration-break property has two values. The first value is “slice”. The first part of the element is shown as if its box was not fragmented, then the showing of the box is sliced into pieces for each line,…

The CSS bottom property specifies the bottom position of an element in combination with the position property. Depending on how the element is positioned, the effect of the bottom property may be different. Particularly: Initial Value auto Applies to All elements. It also applies to ::first-letter. Inherited No. Animatable Yes. The bottom position can be animatable. Version CSS2 DOM Syntax object.style.bottom =…

CSS border-width property sets the widths of all four sides of an element’s border. It is a shorthand property which specifies: This property has four values. When one value is used, the border-width value will apply to all four sides of the element (i.e. top, right, bottom, left). If two values are used, the first value will…