Category: CSS Reference

CSS Border-Bottom-left-radius Property

CSS border-bottom-left-radius: #example1 { border: 2px solid red; border-bottom-left-radius: 25px; }#example2 { border: 2px solid red; border-bottom-left-radius: 50px 20px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-bottom-left-radius property defines the radius of the bottom-left corner. Tip: This property allows you to add rounded borders to elements! Default value: 0 Inherited: no Animatable: yes. Read about animatable – Try […]

CSS border-bottom-color Property

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

CSS border-bottom-style Property

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

CSS border-bottom Property

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

CSS border-bottom-width Property

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

CSS border Property

Example Set the style of the borders for different elements: h1 { border: 5px solid red; } h2 { border: 4px dotted blue; } div { border: double; } Try it Yourself » Definition and Usage The border property is a shorthand property for border-width, border-style and border-color. Default value: medium none color Inherited: no Animatable: yes, see individual properties. Read about animatable – Try it Version: […]

CSS border-color Property

Set a CSS border-color: div {border-color: coral;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-color property sets the color of an element’s four borders. This property can have from one to four values. If the border-color property has four values: border-color: red green blue pink; top border is red right […]

CSS border-style Property

Set a CSS border-style: div {border-style: dotted;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-style property sets the style of an element’s four borders. This property can have from one to four values. Examples: border-style: dotted solid double dashed; top border is dotted right border is solid bottom border is […]

CSS border-width Property

Set a border-width: div {border-width: thin;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The border-width property sets the width of an element’s four borders. This property can have from one to four values. Examples: border-width: thin medium thick 10px; top border is thin right border is medium bottom border is thick […]

CSS background-blend-mode Property

Specify the Background Blend-mode to be “lighten”: div { width: 400px; height: 400px; background-repeat: no-repeat, repeat; background-image: url(“img_tree.gif”), url(“paper.gif”); background-blend-mode: lighten; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-blend-mode property defines the blending mode of each background layer (color and/or image). Default value: normal Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: […]

CSS background-attachment Property

A background-attachment (image) that will not scroll with the page (fixed): body{ background-image: url(“img_tree.gif”); background-repeat: no-repeat; background-attachment: fixed; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. Default value: scroll Inherited: no Animatable: no. Read about animatable […]

CSS3 background-clip Property

Example Specify how far the background should extend within an element: div { border: 10px dotted black; padding: 15px; background: lightblue; background-clip: padding-box; } Try it Yourself » Definition and Usage The background-clip property defines how far the background (color or image) should extend within an element. Default value: border-box Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.backgroundClip=”content-box” Try […]

CSS3 background-origin Property

Example Let the background image start from the upper left corner of the content: #example1 { border: 10px double black; padding: 25px; background: url(paper.gif); background-repeat: no-repeat; background-origin: content-box; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-origin property specifies the origin position (the background positioning area) of a background image. Note: This property has no […]

CSS background-attachment Property

Example A background-image that will not scroll with the page (fixed): body{ background-image: url(“img_tree.gif”); background-repeat: no-repeat; background-attachment: fixed; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. Default value: scroll Inherited: no Animatable: no. Read about animatable […]

CSS background-repeat Property

Example Repeat a background-image only vertically: body { background-image: url(“paper.gif”); background-repeat: repeat-y; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property. If […]

CSS3 background-size Property

Example Specify the size of a background image with “auto” and in pixels: #example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: auto; }#example2 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-size property specifies the size of the background images. There are four different syntaxes you can use with […]

CSS Units

CSS has several different units for expressing a length. Many CSS properties take “length” values, such as width, margin, padding, font-size, border-width, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit […]

CSS background-position Property

Example How to position a background-image: body { background-image: url(‘w3css.gif’); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. […]

CSS background-image Property

Example Set a background-image for the <body> element: body { background-image: url(“paper.gif”); background-color: #cccccc; } Try it Yourself » Example Set two background images for the <body> element: body { background-image: url(“img_tree.gif”), url(“paper.gif”); background-color: #cccccc; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-image property sets one or more background images for an element. […]

CSS background-color Property

Example Set the background color for a page: body {background-color: coral;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background […]