column rule width : Specify the width of the rule between columns: div { -webkit-column-rule-width: 10px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 10px; /* Firefox */ column-rule-width: 10px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-rule-width property specifies the width of the rule between columns. Default value: medium Inherited: no Animatable: yes. Read about animatable – Try […]
Column rule color: Specify the color of the rule between columns: div { -webkit-column-rule-color: #ff0000; /* Chrome, Safari, Opera */ -moz-column-rule-color: #ff0000; /* Firefox */ column-rule-color: #ff0000; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-rule-color property specifies the color of the rule between columns. Default value: The current color of the element Inherited: […]
Rule Property: Specify the width, style, and color of the rule between columns: div { -webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */ -moz-column-rule: 4px double #ff00ff; /* Firefox */ column-rule: 4px double #ff00ff; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-rule property sets the width, style, and color of the rule […]
column-gap: Specify a 40 pixels gap between the columns: div { -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-gap property specifies the gap between the columns. Note: If there is a column-rule between columns, it will appear in the middle […]
Specify how to fill columns: .newspaper1 { -moz-column-fill: auto; /* Firefox */ column-fill: auto; } .newspaper2 { -moz-column-fill: balance; /* Firefox */ column-fill: balance; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-fill property specifies how to fill columns, balanced or not. Tip: If you add a height to a multi-column element, you can control how the […]
Column Count: Divide the text in the <div> element into three columns: div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-count property specifies the number of columns an element should be divided into. Default value: auto Inherited: no […]
Set the text-color for different elements: body { color: red; }h1 { color: #00ff00; } p.ex { color: rgb(0,0,255); } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The color property specifies the color of text. Tip: Use a background color combined with a text color that makes the text easy to read. Default value: not specified […]
Clip Property/Clip an image: img { position: absolute; clip: rect(0px,60px,200px,0px); } Try it Yourself » Definition and Usage What happens if an image is larger than its containing element? – The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the […]
Clear Property: Do not allow floating elements on the left or the right side of a specified <p> element: img { float: left; }p.clear { clear: both; } Try it Yourself » Definition and Usage The clear property specifies on which sides of an element floating elements are not allowed to float. Default value: none Inherited: no Animatable: no. Read […]
charset: Set the encoding of the style sheet to Unicode UTF-8 @charset “UTF-8”; Definition and Usage The @charset rule specifies the character encoding used in the style sheet. The @charset rule must be the first element in the style sheet and not be preceded by any character. If several @charset rules are defined, only the […]
Set the caret-color of the cursor in input elements: input { caret-color: red; } Try it Yourself » Definition and Usage The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable. Default value: auto Inherited: yes Animatable: Read about animatable Version: CSS3 JavaScript syntax: object.style.caretColor=”red” Try it CSS Syntax […]
caption-side: Specify the placement of table captions: #example1 { caption-side: bottom; }#example2 { caption-side: top; } Try it Yourself » Definition and Usage The caption-side property specifies the placement of a table caption. Default value: top Inherited: yes Animatable: no. Read about animatable Version: CSS2 JavaScript syntax: object.style.captionSide=”bottom” Try it CSS Syntax caption-side: top|bottom|initial|inherit; Property Values Value Description top Puts the caption […]
Box sizing: Include padding and border in the element’s total width and height: #example1 { box-sizing: border-box; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. Default value: content-box Inherited: […]
Here we will learn about Box-shadow. Add shadows to different <div> elements: #example1 { box-shadow: 5px 10px; }#example2 { box-shadow: 5px 10px #888888; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The box-shadow property attaches one or more shadows to an element. Default value: none Inherited: no Animatable: yes. Read about animatable – Try it Version: CSS3 JavaScript […]
Specify the box decoration break property: span.ex1 { -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; } span.ex2 { -webkit-box-decoration-break: slice; -o-box-decoration-break: slice; box-decoration-break: slice; } Try it Yourself » Definition and Usage The box-decoration-break property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented. Default value: slice Inherited: no […]
Set the bottom edge of the <div> element to 10px above the bottom edge of its nearest parent element with some positioning: div.absolute { position: absolute; bottom: 10px; width: 50%; border: 3px solid #8AC007; } Try it Yourself » Definition and Usage The bottom property specifies the vertical position of a positioned element. This property has no effect on non-positioned […]
Add rounded borders to the top-right corner of two <div> elements: #example1 { border: 2px solid red; border-top-right-radius: 25px; }#example2 { border: 2px solid red; border-top-right-radius: 50px 20px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-top-right-radius property defines the radius of the top-right corner. Tip: This property allow you to add rounded borders to […]
Add rounded borders to the top-left corner of two <div> elements: #example1 { border: 2px solid red; border-top-left-radius: 25px; }#example2 { border: 2px solid red; border-top-left-radius: 50px 20px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-top-left-radius property defines the radius of the top-left corner. Tip: This property allows you to add rounded borders to […]
CSS border-top Property; Set the style of the CSS border-top for different elements. h1 { border-top: 5px solid red; }h2 { border-top: 4px dotted blue; }div { border-top: double; } Try it Yourself » Definition and Usage The border-top shorthand property sets all the top border properties in one declaration. The properties that can be set must be in the following […]
Set a CSS border-top-color: div {border-top-color: coral;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-top-color property sets the color of an element’s top border. Note: Always declare the border-style or the border-top-style property before the border-top-color property. An element must have a border before you can change the color. Default value: […]
