Category: CSS Reference

CSS border-top-style Property

Set a CSS border-top-style: div {border-top-style: dotted;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-top-style property sets the style of an element’s top border. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.borderTopStyle=”dashed” Try it CSS Syntax border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Property Values Value Description none Specifies no border. […]

CSS border-top-width Property

Set a CSS border-top-width: div {border-top-width: thin;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-top-width property sets the width of an element’s top border. Note: Always declare the border-style or the border-top-style property before the border-top-width property. An element must have borders before you can change the width. Default value: medium […]

CSS border-spacing Property

Set the CSS border-spacing Property for a table: #table1 { border-collapse: separate; border-spacing: 15px; }#table2 { border-collapse: separate; border-spacing: 15px 50px; } Try it Yourself » Definition and Usage The border-spacing property sets the distance between the borders of adjacent cells. Note: This property works only when border-collapse is separate. Default value: 2px Inherited: yes Animatable: yes. Read about animatable – Try it Version: CSS2 JavaScript syntax: object.style.borderSpacing=”15px” Try […]

CSS border-right Property

Set the style of the CSS border-right for different elements: h1 { border-right: 5px solid red; }h2 { border-right: 4px dotted blue; }div { border-right: double; } Try it Yourself » Definition and Usage The border-right shorthand property sets all the right border properties in one declaration. The properties that can be set must be in the following order: border-right-width border-right-style […]

CSS border-right-color Property

Set a color for the right border: div {border-right-color: coral;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-right-color property sets the color of an element’s right border. Note: Always declare the border-style or the border-right-style property before the border-right-color property. An element must have a border before you can change the […]

CSS border-right-style Property

Set a CSS border-right-style: div {border-right-style: dotted;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-right-style property sets the style of an element’s right border. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.borderRightStyle=”dotted” Try it CSS Syntax border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Property Values Value Description none Specifies no border. […]

CSS border-right-width Property

CSS border-right-width Property | Learn CSS Set a width for the right border: div {border-right-width: thin;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-right-width property sets the width of an element’s right border. Note: Always declare the border-style or the border-right-style property before the border-right-width property. An element must have borders […]

CSS border-radius Property

Add rounded borders to two <div> elements: #example1 { border: 2px solid red; border-radius: 25px; } #example2 { border: 2px solid red; border-radius: 50px 20px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-radius property defines the radius of the element’s corners. Tip: This property allows you to add rounded borders to elements! This property […]

CSS border-left Property

Set the style of the CSS border-left for different elements: h1 { border-left: 5px solid red; } h2 { border-left: 4px dotted blue; } div { border-left: double; } Try it Yourself » Definition and Usage The border-left shorthand property sets all the left border properties in one declaration. The properties that can be set must be in the following order: […]

CSS border-left-color Property

Set a CSS border-left-color: div {border-left-color: coral;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-left-color property sets the color of an element’s left border. Note: Always declare the border-style or the border-left-style property before the border-left-color property. An element must have a border before you can change the color. Default value: […]

CSS border-left-style Property

Set a CSS border-left-style: div {border-left-style: dotted;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-left-style property sets the style of an element’s left border. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.borderLeftStyle=”dotted” Try it CSS Syntax border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Property Values Value Description Code – Play it […]

CSS border-left-width Property

Set a CSS border-left-width: div {border-left-width: thin;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-left-width property sets the width of an element’s left border. Note: Always declare the border-style or the border-left-style property before the border-left-width property. An element must have borders before you can change the width. Default value: medium […]

CSS border-image-repeat Property

CSS border-image-repeat; Specify how to repeat the border image: #borderimg { border-image-source: url(border.png); border-image-repeat: repeat; } Try it Yourself » Definition and Usage The border-image-repeat property specifies whether the border image should be repeated, rounded or stretched. Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties). Default value: stretch Inherited: no Animatable: no. Read about animatable […]

CSS border-image-outset Property

CSS border-image-outset; Place the border image 10 pixels outside the border edges of an element: #borderimg { border-image-source: url(border.png); border-image-outset: 10px; } Definition and Usage The border-image-outset property specifies the amount by which the border image area extends beyond the border box. Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties). Default value: 0 […]

CSS border-image-width Property

CSS border-image-width | Specify the width of the border image: #borderimg { border-image-source: url(border.png); border-image-width: 10px; } Try it Yourself » Definition and Usage The border-image-width property specifies the width of the border image. Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties). Default value: 1 Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript […]

CSS border-image-slice Property

CSS border-image-slice: Specify how to slice the border image: #borderimg { border-image-slice: 30%; } Try it Yourself » Definition and Usage The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle. The “middle” part is treated as fully transparent, unless the […]

CSS border-image-source Property

Specify an CSS border-image-source around an element: #borderimg { border-image-source: url(border.png); } Try it Yourself » Definition and Usage The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element). Tip: If the value is “none”, or if the image cannot be displayed, the border styles […]

CSS border-image Property

Specify an CSS border-image around an element: #borderimg { border-image: url(border.png) 30 round; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-image property allows you to specify an image to be used as the border around an element. The border-image property is a shorthand property for border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. Omitted values are set […]

CSS border-collapse Property

Set the CSS border-collapse model for two tables: #table1 { border-collapse: separate; }#table2 { border-collapse: collapse; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML. Default value: separate Inherited: yes Animatable: no. Read about animatable Version: […]

CSS border-bottom-right-radius Property

Add CSS border-bottom-right-radius corner of two <div> elements: #example1 { border: 2px solid red; border-bottom-right-radius: 25px; } #example2 { border: 2px solid red; border-bottom-right-radius: 50px 20px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-bottom-right-radius property defines the radius of the bottom-right corner. Tip: This property allows you to add rounded borders to elements! Default […]