A list of 300+ CSS properties

CSS align-content property aligns the content vertically (along cross/block/column axis) within a container. The container adjusts its padding so as to align the content vertically. We are using a flex container.

normalDefault

It stretches out the descendant elements to fill the height completely.

align-content: normal;

baseline

It aligns multiple objects (elements) on the same baseline such as cells within a row.

text-align: baseline;

center

It aligns the content elements in the middle of the container.

align-content: center;

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

align-content: stretch;

flex-start

flex-start aligns the content at the start of the flex container.

align-content: flex-start;

flex-end

flex-end aligns the content at the end of the flex container.

align-content: flex-end;

space-between

In this case, the first object is aligned at the start of the container and the last object is aligned at the end of the container. The remaining objects are placed in such a way that white space is distributed equally among any two objects.

align-content: space-between;

space-around

The objects are distributed in such a way that there is the same space between the objects except at the start and end of the container.

There is half sized space (half of the space that is between any two objects) before the first object and after the last object.

align-content: space-around;

space-evenly

It adjusts the alignment of objects so as to distribute equal space between and around the objects.

align-content: space-evenly;

CSS align-items property controls the alignment of the child items vertically (along cross/block/column axis). We are using flex container.

normalDefault

It stretches out the child elements so as to fill the height of the container completely.

align-items: normal;

baseline

It aligns multiple objects (elements) on same baseline such as cells within a row.

align-items: baseline;

center

It aligns the content in the middle of the container.

align-items: center;

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

align-items: stretch;

flex-start

flex-start aligns the content at the start of flex container.

align-items: flex-start;

flex-end

flex-end aligns the content at the end of the flex container.

align-items: flex-end;

CSS align-self property aligns itself vertically (cross/block/column axis) within its container by adjusting the margins. We are using flex container.

autoDefault

It stretches out the element vertically to fill the height of the container completely.

align-self: auto;

baseline

It aligns the element on the normal baseline.

align-self: baseline;

center

It aligns an element at the middle of cotainer.

align-self: center;

stretch

It stretches the element so as fill the height of container completely.

align-self: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

align-self: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

align-self: flex-end;

CSS animation

CSS animation-delay property delays the animation execution i.e. how much time delay between the animation start and its execution.

Stop

+ve value (seconds)Default

animation-delay accepts value in seconds. 0s means the animation starts its execution as soon as it starts.

animation-delay: 0s;

+ve fractional value (seconds)

animation-delay also accepts fractional values. 2.5s means the animation starts execution after 2.5 seconds when it is applied.

animation-delay: 2.5s;

+ve value (milliseconds)

value in milliseconds may also be used. 2000ms means 2s. It will start execution after 2s.

animation-delay: 2000ms;

-ve value (seconds)

It starts execution partway through its life cycle. If the animation-duration is 3s and animation-delay is -2s, it shows a part of the cycle in the remaining time i.e. you can see the part of the animation cycle for the last second.

animation-delay: -2s;

Stop

normalDefault

represents normal direction of animation cycles.

animation-direction: normal;

reverse

represents animation cycles in the reverse direction.

animation-direction: reverse;

alternate

represents odd animation cycles in the normal direction while the even ones in reverse direction

In other words, 1, 3, and 5 will be in the normal direction while 2, 4, and 6 will be the reverse direction.

animation-direction: alternate;

alternate-reverse

It is exactly opposite to alternate i.e. odd animation cycles in the reverse direction while the even ones in the normal direction.

In other words, 1, 3, and 5 will be in the reverse direction while 2, 4, and 6 will be the normal direction.

animation-direction: alternate-reverse;

Stop

+ve value (seconds)Default

This value determnines the duration of an animation cycle. 1s represents the duration in the demo.

animation-duration: 1s;

+ve value (seconds)

This value determnines the duration of an animation cycle. If the value is 0s, the animation occurs instantly for 0s.

animation-duration: 0s;

+ve fractional value (seconds)

The animation-duration also accepts fractional values. The animation can continue for 2.5s.

animation-duration: 2.5s;

+ve value (milliseconds)

time in milliseconds may also be used as the value. The animation continues for 2000ms i.e. 2s.

animation-duration: 2000ms;

Stop

noneDefault

It does not apply CSS properties to the element during the idle time i.e. during the animation delay.

animation-fill-mode: none;

forwards

It applies property values that are picked from the end of the last completed animation cycle in case of more than one cycles (when animation-iteration-count>0).

If animation-iteration-count is 0, it applies CSS properties that are picked from the start of an animation cycle.

animation-fill-mode: forwards;

backwards

In this case, the applied properties are picked from the start of the first animation cycle.

These values are picked either from the 'from' in case of normal or 'to' in case of reverse.

animation-fill-mode: backwards;

both

It represents the effect of both forwards and backward i.e. the applied properties are picked from the start of the firs animation cycle and from the end of last animation cycle.

animation-fill-mode: both;

Stop

+ve integerDefault

A positive integer represents the number of times an animation cycle repeats itself.

'1' means the animation completes its cycle only once from beginning to end.

animation-iteration-count: 1;

+ve fractional value

If there is a fractional value, the animation cycles repeat themselves completely for an integral part and partially for the fractional part. 1.5 means one and half of the cycle.

animation-iteration-count: 1.5;

infinite

The animation cycle repeats itself forever.

animation-iteration-count: infinite;

Stop

noneDefault

There will be no animation.

animation-name: none;

keyframe-name

It represents a @keyframe rule with keyframe-name consisting of time intervals and each time interval containing respective property values. We are using 'rotate' keyframe as the value of animation-name.

animation-name: rotate;

keyframe-name list

We can use more than one different keyframes as the value of animation-name. We are using 'rotate' and 'moveTo' keyframes as the value of animation-name.

If more than one keyframes are affecting the same CSS property, the last keyframe will override the previous ones.

animation-name: rotate, moveTo;

Stop

runningDefault

It represents the running state of animation.

animation-play-state: running;

paused

When animation is paused, it continues applying property values that it made before pausing the animation (pausing the animation-duration or animation-delay).

When it is switched to running state, the animation starts its execution at the time interval (animation-duration or animation-delay resumes) where it was left off.

animation-play-state: paused;

Stop

easeDefault

The speed of the animation is constant over its duration. It represents normal behavior over the animation-duration.

animation-timing-function: ease;

ease-in

The speed is slow at the start of animation i.e. It represents smooth behavior at the start only.

animation-timing-function: ease-in;

ease-out

The speed is fast at the end of animation i.e. The animation is smooth at the end.

animation-timing-function: ease-out;

ease-in-out

The speed of the animation is slow at the start and end of animation-duration as compared to intermediate time. It represents smooth behavior at the start and end of the animation.

animation-timing-function: ease-in-out;

visible Default

The back face is visible when it is rotated by 180 degrees.

backface-visibility: visibile;

hidden

The back face is not visible when it is rotated by 180 degrees.

backface-visibility: hidden;

fixedDefault

The background is fixed with respect to both the content box and the viewport.

The background-image remains fixed with respect to both the box and the viewport.

background-attachment: fixed;

scroll

The background remains fixed with respect to the content box but scrolls with respect to viewport.

The background-image remains fixed with respect to the content box but does not remain fixed with respect to viewport.

background-attachment: scroll;

local

The background does not remain fixed with respect to both the content box and the viewport.

The background-image scrolls with respect to both content box and viewport.

background-attachment: local;

border-boxDefault

In this case, the background of all of the areas within border-box is painted such as content area, padding area, and border area.

background-clip: border-box;

padding-box

In this case, the areas that are within padding-box are painted such as the padding and content areas.

background-clip: padding-box;

content-box

The only background of content-area is painted i.e. excluding the other two areas.

background-clip: content-box;

color-nameDefault

Any name of the color can be used as the value of background-color. The default color of background is blue for an element.

background-color: transparent;

color-name

The following demo represents skyblue color for the background of an element.

background-color: skyblue;

rgb value

It represents rgb value of a color. The hexadecimal value of red color is given below.

background-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color. The hexadecimal notation of blue color is given below.

background-color: #0000ff;

noneDefault

It adds a new layer but does not add any image.

background-image: none;

url()

This value represents the address of an image that is used as the background of an element.

background-image: url(img/web4college.png);

url(), url()

These two URLs represent the address of two different images with the first one on top and the second one at the bottom.

background-image: url(img/web4college.png), url(img/background.jpg);

padding-boxDefault

The background image is positioned relative to the padding box.

background-origin: padding-box;

border-box

The background image is positioned relative to the border box.

background-origin: border-box;

content-box

The background image is positioned relative to the content box.

background-origin: content-box;

X-offset Y-offsetDefault

Horizontal offset is 0% which means 0% width of the image is under 0% width of the background positioning area from the left side.

Vertical offset is 0% which means that 0% height of the image is under 70% height of the background position area from the top side.

background-position: 0% 0%;

X-offset Y-offset

Horizontal offset is 40% which means 40% width of the image is under 40% width of the background positioning area from the left side.

Vertical offset is 70% which means that 70% height of the image is under 70% height of the background position area from the top side.

background-position: 40% 70%;

XY-offset

This one value represents both vertical and horizontal offsets.

For examples, 30% value means 30% is horizontal offset and 50% is vertical offset (default). It computes to 30% 50%.

background-position: 30%;

left

The image is aligned on the left side horizontally (the first value is 0%). And it is aligned at the center vertically (default). It computes to 0% 50%.

background-position: left;

center

This value aligns an image horizontally and vertically at the center. It computes to 50% 50%.

background-position: center;

right

This value aligns an image horizontally on the right side (first value is 100%). It computes to 100% 50%

background-position: right;

top

top value vertically align an image at the top (second value is 0%). It computes to 50% 0%.

background-position: top;

bottom

bottom value aligns an image vertically at the bottom (second value is 100%). It computes to 50% 100%.

background-position: bottom;

repeatDefault

The image is repeated along both axes to fill the painting area completely. It is the same as repeat repeat.

background-repeat: repeat;

no-repeat

The image should not be repeated to fill the painting area.

background-repeat: no-repeat;

repeat-x

The image is repeated along x-axis only. It is the same as background-repeat: repeat   no-repeat;

background-repeat: repeat-x;

repeat-y

The image is repeated along y-axis only. It is the same as background-repeat: no-repeat   repeat;

background-repeat: repeat-y;

space

In this case, the images are repeated and spaced out (kept at a distance) so as to fill the painting area completely. The first and last images must touch the corners of the painting area.

background-repeat: space;

round

The image is repeated untill it fills the background painting area. If it does not fit the painting area a whole number of times, the image is rescaled so as to fit the area.

background-repeat: round;

autoDefault

The size of the background image is automatically calculated.

background-size: auto;

contain

The image is rescaled to the largest size such that both sides of the image fit inside the background painting area while preserving the aspect ratio.

background-size: contain;

cover

The image is rescaled to the smallest size such that it covers the background painting area completely while preserving the aspect ratio.

background-size: cover;

+ve length

We specify a fixed length for the background image size.

background-size: 20px;

percentage

It represents the image size as the percentage of the background painting area.

30% means the background image occupies the 30% of the element. And three images can fill the painting area of an element with this size.

background-size: 30%;

autoDefault

auto value means the height will be changed automatically according to the content.

block-size: auto;

+ve length

It specifies the fixed size of a block.

block-size: 300px;

red green

It is the same as border-block-color: red green;

border-block-color: red green;

rgb value

It represents rgb value of a color. The hexadecimal value of red color for the border is given below.

border-block-end-color: rgb(255,0,0);

double

The right border consists of two lines. The total border-width equals to the two lines and space between them.

border-block-end-style: double;

+ve length

length defines the width of border for the end side. The used units might be px, in, em, pt.

border-block-end-width: 10px;

rgb value

It represents rgb value of a color. The rgb value of red color for the border is given below.

border-block-start-color: rgb(255,0,0);

dashed

The right border consists of a series of square shaped dashes.

border-block-start-style: dashed;

+ve length

CSS border-block-start-width is a logical property that defines width for the start side border of a block. The selection of start side depends upon the writing-mode.

border-block-start-width: 10px;

currentColorDefault

currentColor keyword represents the same color for the bottom side border as of text color.

border-bottom-color: currentColor;

color-name

The following demo represents skyblue color for the bottom side border.

border-bottom-color: skyblue;

rgb value

It represents rgb value of a color.

The hexadecimal value of red color for the bottom side border is given below.

border-bottom-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the bottom side border is given below.

border-bottom-color: #0000ff;

+ve length (in px)Default

It means the length of both horizontal and vertical radii is 0 for bottom-left corner.

border-bottom-left-radius: 0px;

+ve length (in percentage)

The length of both horizontal and vertical radii is 30% for the bottom-left corner.

border-bottom-left-radius: 30%;

X-radius Y-radius (in px)

The length of horizontal and vertical radii is 40px and 20px respectively for the bottom-left corner.

border-bottom-left-radius: 40px 20px;

X-radius Y-radius (in percentage)

The length of horizontal and vertical radii is 30% and 50% respectively for the bottom-left corner.

border-bottom-left-radius: 30% 50%;

+ve length (in px)Default

It means the length of both horizontal and vertical radii is 0 for bottom-right corner.

border-bottom-right-radius: 0px;

+ve length (in percentage)

The length of both horizontal and vertical radii is 30% for the bottom-right corner.

border-bottom-right-radius: 30%;

X-radius Y-radius (in px)

The length of horizontal and vertical radii is 40px and 20px respectively for the bottom-right corner.

border-bottom-right-radius: 40px 20px;

X-radius Y-radius (in percentage)

The length of horizontal and vertical radii is 30% and 50% respectively for the bottom-right corner.

border-bottom-right-radius: 30% 50%;

none

There is no style. In this case, the color and width of top border are also ignored i.e. 0px border.

border-bottom-style: none;

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

border-bottom-style: hidden;

dashed

The bottom border consists of a series of square shaped dashes.

border-bottom-style: dashed;

dotted

The bottom border consists of a series of round dots.

border-bottom-style: dotted;

solid

The bottom border consists of a solid line.

border-bottom-style: solid;

double

The bottom border consists of two lines. The total border-width equals to the two lines and space between them.

border-bottom-style: double;

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The outer side of the bottom border is darker than the inner side of the bottom border.

border-bottom-style: ridge;

medium

medium value represents medium sized border for the bottom side.thin≤medium≤thick.

border-bottom-width: medium;

thin

thin value defines thin line border for the bottom side.

border-bottom-width: thin;

thick

thick value defines a thick line border for the bottom side.

border-bottom-width: thick;

+ve length

length

length defines the line width of border for the bottom side. The used units might be px, in, em, pt.

border-bottom-width: 10px;

separateDefault

There is space between the borders of table cells.

border-collapse: separate;

collapse

It collapses the borders of table cells i.e. there is no space between the cells in a table.

border-collapse: collapse;

currentColorDefault

It is the same as border-color: currentColor currentColor currentColor currentColor;

border-color: currentColor;

currentColorDefault

It is the same as border-color: red green red green;

border-color: red green;

currentColorDefault

It is the same as border-color: red green blue green;

border-color: red green;

red green blue yellow

It is the same as border-color: red green blue yellow;

border-color: red green blue yellow;

lengthDefault

represents the width of border image outset.

border-image-outset: 0px;

number

This number represents multiple of the border-width. If 3 is the value of border-image-outset and border-width is 5px then the computed value would be 15px.

border-image-outset: 3;

stretchDefault

The border image stretches itself to fill the border area.

border-image-repeat: stretch;

repeat

The border image is repeated to fill the border area.

border-image-repeat: repeat;

round

The border image is repeated untill it fills the border area. If it does not fit the border area a whole number of times, the image is rescaled so as to fit the border area.

border-image-repeat: round;

+ve percentageDefault

It is relative to the dimensions of the images. horizontal offset is relative to the width and vertical offset is relative to the height of the image.

border-image-slice: 100%;

+ve number

This number represents the pixels of image or coordinates.

border-image-width: 14;

noneDefault

No image is rendered for the border area and border-style is used.

border-image-source: none;

ulr()

This url specifies the address of an image to use as the border area.

border-image-source: url('img/web4college.png');

+ve lengthDefault

length value specifies the width of border image area.

border-image-width: 1px;

+ve percentage

percentage value specifies the width of border image area.

border-image-width: 30%;

+ve number

It computes to the multiple of border-width. If the border-width is 5px and border-image-width is 2 then the computed value would be 10px.

border-image-width: 2;

auto

This is computed to the intrinsic size (height/width) of the image. If there is no intrinsic size of the image, it is computed to border-width.

The following 'auto' value computes 96px width of the border image area because the size of the image is 96px.

border-image-width: auto;

rgb value

It represents rgb value of a color. The rgb value of red color for the border is given below.

border-inline-end-color: rgb(255,0,0);

dashed

The right border consists of a series of square shaped dashes.

border-inline-end-style: dashed;

+ve length

length defines the line width of border for the right side. The used units might be px, in, em, pt.

border-inline-end-width: 10px;

rgb value

It represents rgb value of a color. The rgb value of red color for the border is given below.

border-inline-start-color: rgb(255,0,0);

dashed

The right border consists of a series of square shaped dashes.

border-inline-start-style: dashed;

+ve length

length defines the line width of border for the right side. The used units might be px, in, em, pt.

border-inline-start-width: 10px;

CSS border-left-color

currentColorDefault

currentColor keyword represents the same color for the left side border as of text color.

border-left-color: currentColor;

color-name

The following demo represents skyblue color for the left side border.

border-left-color: skyblue;

rgb value

It represents rgb value of a color.

The hexadecimal value of red color for the left side border is given below.

border-left-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the left side border is given below.

border-left-color: rgb(255,0,0);

noneDefault

There is no style. In this case, the color and width of left border are also ignored i.e. 0px border.

border-left-style: none;

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

border-left-style: hidden;

dashed

The left border consists of a series of square shaped dashes.

border-left-style: dashed;

dotted

The left border consists of a series of round dots.

border-left-style: dotted;

solid

The left border consists of a solid line.

border-left-style: solid;

double

The left border consists of two lines. The total border-width equals to the two lines and space between them.

border-left-style: double;

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The outer side of the left border is darker than the inner side of the left border.

border-left-style: ridge;

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the left border is darker than the outer side of the left border.

border-left-style: groove;

inset

The color of top, left borders is darker than border-color but the color of right, bottom borders is the same as border-color.

The effect of outset value can be observed in border.

border-left-style: inset;

outset

The color of top, left sides is the same as border-left but the color of right, bottom sides is darker than border-color.

The effect of inset value can be observed in border.

border-left-style: outset;

mediumDefault

medium value represents medium sized border for the left side. thin≤medium≤thick

border-left-width: medium;

thin

thin value defines thin line border for the left side.

border-left-width: thin;

thick

thick value defines a thick line border for the left side.

border-left-width: thick;

+ve length

length defines the line width of border for the left side. The used units might be px, in, em, pt.

border-left-width: 10px;

currentColorDefault

currentColor keyword represents the same color for the right side border as of text color.

border-right-color: currentColor;

color-name

The following demo represents skyblue color for the right side border.

border-right-color: skyblue;

rgb value

It represents rgb value of a color.

The hexadecimal value of red color for the right side border is given below.

border-right-color: rgb(255,0,0);

rgb value

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the right side border is given below.

border-right-color: #0000ff;

noneDefault

There is no style. In this case, the color and width of right border are also ignored i.e. 0px border.

border-right-style: none;

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

border-right-style: hidden;

dotted

The right border consists of a series of round dots.

border-right-style: dotted;

solid

The right border consists of a solid line.

border-right-style: solid;

double

The right border consists of two lines. The total border-width equals to the two lines and space between them.

border-right-style: double;

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The outer side of the right border is darker than the inner side of the right border.

border-right-style: ridge;

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the right border is darker than the outer side of the right border.

border-right-style: groove;

inset

The color of top, left borders is darker than border-color but the color of right, bottom borders is the same as border-color.

The effect of inset value can be observed in border.

border-right-style: inset;

outset

The color of top, left sides is the same as border-color but the color of right, bottom sides is darker than border-color.

The effect of outset value can be observed in border.

border-right-style: outset;

mediumDefault

medium value represents medium sized border for the right side. thin≤medium≤thick

border-right-width: medium;

thin

thin value defines thin line border for the right side.

border-right-width: thin;

thick

thick value defines a thick line border for the right side.

border-right-width: thick;

+ve length

length defines the line width of border for the right side. The used units might be px, in, em, pt.

length

border-right-width: 10px;

+ve lengthDefault

length value adds spacing between the borders of table cells. 0px represents both horizontal and vertical spacing.

border-spacing: 0px;

+ve length

one value determines both the horizontal and vertical spacing. There is 10px horizontal and vertical spacing.

border-spacing: 0px;

noneDefault

It is the same as border-style: none none none none;.

border-style: none;

solid dotted

It is the same as border-style: solid dotted solid dotted;.

border-style: solid dotted;

solid dotted dashed

It is the same as border-style: solid dotted dashed dotted;.

border-style: solid dotted dashed;

none solid dotted dashed

It is the same as border-style: none solid dotted dashed;.

border-style: none solid dotted dashed;

currentColorDefault

currentColor keyword represents the same color for the top side border as of text color.

border-top-color: currentColor;

color-name

The following demo represents skyblue color for the top side border.

border-top-color: skyblue;

rgb value

It represents rgb value of a color.

The hexadecimal value of red color for the top side border is given below.

border-top-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the top side border is given below.

border-top-color: #0000ff;

+ve length (in px)Default

It means the length of both horizontal and vertical radii is 0 for top-left corner.

border-top-left-radius: 0px;

+ve length (in percentage)

The length of the horizontal and vertical radii is 30% for top-left corner.

border-top-left-radius: 30%;

X-radius Y-radius (in px)

The length of horizontal and vertical radii is 40px and 20px respectively for top-left corner.

border-top-left-radius: 40px 20px;

X-radius Y-radius (in percentage)

The length of horizontal and vertical radii is 30% and 50% respectively for top-left corner.

border-top-left-radius: 30% 50%;

noneDefault

There is no style. In this case, the color and width of top border are also ignored i.e. 0px border.

border-top-style: none;

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

border-top-style: hidden;

dashed

The top border consists of a series of square shaped dashes.

border-top-style: dashed;

dotted

The top border consists of a series of round dots.

border-top-style: dotted;

solid

The top border consists of a solid line.

border-top-style: solid;

double

The top border consists of two lines. The total border-width equals to the two lines and space between them.

border-top-style: double;

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The outer side of the top border is darker than the inner side of the top border.

border-top-style: ridge;

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the top border is darker than the outer side of the top border.

border-top-style: ridge;

mediumDefault

medium value represents medium sized border for the top side. thin<medium<thick

border-top-width: medium;

thin

thin value defines thin line border for the top side.

border-top-width: thin;

thick

thick value defines a thick line border for the top side.

border-top-width: thick;

length

length defines the line width of border for the top side. The used units might be px, in, em, pt.

border-top-width: 10px;

mediumDefault

It is the same as border-width: medium medium medium medium;

border-width: medium;

10px 15px

It is the same as border-width: 10px 15px 10px 15px;

border-width: 10px 15px;

10px 15px 20px

It is the same as border-width: 10px 15px 20px 15px;

border-width: 10px 15px 20px;

10px 15px 20px 25px

It is the same as border-width: 10px 15px 20px 25px;

border-width: 10px 15px 20px 25px;

autoDefault

It does not replace the current box.

bottom: auto;

length

It represents the distance of the bottom side of the current box from the bottom side of the parent box.

The box is 50px away from the bottom side of the parent box (absolute position).

bottom: 50px;

percentage

Actually percentage represents height of the parent box.

The box is 20% away from the bottom side of the parent box (absolute position).

bottom: 20%;

1st length

It represents the offset of shadow along X-axis. right (+ve value) or left (-ve value) offset.

You may not observe the effect of horizontal offset along x-axis as long as you apply the next value.

box-shadow: 5px;

2nd length

It represents the offsetof shadow along Y-axis. bottom (+ve value) or top (-ve value) offset.

box-shadow: 5px 5px;

3rd length

It blurs the shadow. This value can't be negative.

box-shadow: 5px 5px 6px;

4th length

It expands the box-shadow in all directions.

box-shadow: 5px 5px 6px 4px;

shadow color

It specifies the color of box shadow.

box-shadow: 5px 5px 6px 4px rgba(255,0,0,1);

inset keyword

This 'inset' keyword transforms the box-shadow from outer side to inner side.

box-shadow: 5px 5px 6px 4px rgba(255,0,0,1) inset;

content-boxDefault

The content-box counts the content area only i.e. border is not a part of the box's dimensions.

The height and width of the box include the content and padding areas only excluding the border area.

box-sizing: content-box;

border-box

In this case, border-box includes the content area, padding area, and border area i.e. border is also a part of the box's dimensions.

The width and height of the border-box is the sum of content area, padding area and border area.

box-sizing: border-box;

topDefault

It aligns the caption at the top of table.

caption-side: top;

bottom

It aligns the caption at the bottom of table.

caption-side: bottom;

color-nameDefault

It defines black color of the caret.

caret-color: auto;

color-name

It defines red color of the caret.

caret-color: red;

rgb value

It is rgb notation of gree color. It represents green color of the caret.

caret-color: rgb(0,2550,0);

hexadecimal value

It is hexadecimal notation of blue color. It defines blue color of the caret.

caret-color: #0000ff;

noneDefault

If the elements are floating on either right or left side then none value allows the flow of other boxes on both sides of the current box.

clear: none;

left

If the boxes are floating on the left side then this value does not allow the flow of boxes on the left side of the current box.

There is no box on the left side of the green box.

clear: left;

right

If the boxes are floating on the left side then this value does not allow the flow of boxes on the right side of the current box.

There is no box on the right side of the green box.

clear: right;

autoDefault

In this case, the number of columns depend upon the column-width.

column-count: auto;

integer

integer value determines the number of columns in a block. 3 means three columns in a block.

column-count: 3;

balanceDefault

It balances the content eqully between different columns.

column-fill: balance;

auto

It fills the content sequentially between columns.

column-fill: auto;

normalDefault

It defines normal length i.e. 1em gap between columns.

column-gap: normal;

+ve length

+ve length defines space between two columns. 50px means there is 50px space between two columns.

column-gap: 50px;

currentColorDefault

currentColor keyword represents the same color for the border as of text color.

column-rule-color: currentColor;

color-name

The following demo represents skyblue color for border.

column-rule-color: skyblue;

rgb value

It represents rgb value of a color. The hexadecimal value of red color for the border is given below.

column-rule-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color. The hexadecimal notation of blue color for the border is given below.

column-rule-color: #0000ff;

noneDefault

There is no style. In this case, the color and width of border are also ignored i.e. 0px border.

column-rule-style: none;

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

column-rule-style: hidden;

dashed

The right border consists of a series of square shaped dashes.

column-rule-style: dashed;

dotted

The right border consists of a series of round dots.

column-rule-style: dotted;

solid

The right border consists of a solid line.

column-rule-style: solid;

double

The right border consists of two lines. The total border-width equals to the two lines and space between them.

column-rule-style: double;

ridge

The content seems to be coming out of the canvas. The half outer side of border is darker than border-block-end-color.

column-rule-style: ridge;

groove

The content seems to be going into the canvas. The half inner side of border is darker than border-block-end-color.

column-rule-style: groove;

mediumDefault

medium value represents medium sized border for the top side. thin<medium<thick

column-rule-width: medium;

thin

thin value defines thin line border for the top side.

column-rule-width: thin;

thick

thick value defines a thick line border for the top side.

column-rule-width: thick;

length

length defines the line width of border for the top side. The used units might be px, in, em, pt.

column-rule-width: 10px;

noneDefault

The element does not span any column and becomes a part of a column.

column-span: none;

all

all value allows an element to span all the columns of the nearest parent element.

column-span: all;

autoDefault

In this case, the width of columns is determined by the number of columns.

column-width: auto;

length

length determines the width of a column in a block. The total width of the box is 300px.

100px represents the width of a column. Three columns are covering the the full width of 300px.

column-width: 100px;

normalDefault

It computes to contents for an element. And it computes to inhibit for a pseudo element.

content: normal;

none

It does not add any content.

content: none;

string

It adds a string in pseudo elements (::before or ::after).

In the following demo, we add a string in the pseudo (::before) element.

content: "Note: ";

url(image-address)

It can add an image either as the content of pseudo elements or normal element.

In the following demo, we add an image in the ::before pseudo element.

content: url("img/web4college.png");

open-quote

In the following demo, we add a close-quote in the ::after pseudo element and open-quote in the ::before pseudo element.

content: open-quote;

close-quote

In the following demo, we add a close-quote in the ::after pseudo element and open-quote in the ::before pseudo element.

content: close-quote;

auto

The shape of cursor depends upon the type of context. There will be text cursor over editable text field.

cursor: auto;

none

It does not add any content.

cursor: none;

context-menu

It adds a string in pseudo elements (::before or ::after).

In the following demo, we add a string in the pseudo (::before) element.

cursor: context-menu;

help

question mark like icon is present under the arrow.

cursor: help;

pointer

pointer icon represents a link.

cursor: pointer;

progress

represents the program is in progress mode.

cursor: progress;

wait

The program is busy and user should wait.

cursor: wait;

cell

represents selected data of cells. It looks like a thick plus ('+').

cursor: cell;

crosshair

indicates two dimensional bitmap selection. It looks like a thin cell.

cursor: crosshair;

text

indicates two dimensional bitmap selection. It looks like a thin cell.

cursor: text;

vertical-text

It indicates the selection of vertical text. It looks like horizontal I shape.

cursor: text;

alias

indicates shortcut to something. It consists of small curved arrow next to the cursor arrow.

cursor: alias;

copy

indicates something is to be copied.

cursor: copy;

move

The object is moveable or being dragged.

cursor: move;

not-allowed

The dragged object can't be place at the cursor location.

cursor: not-allowed;

grab

The object is draggable.

cursor: grab;

e-resize

The purpose of the *-resize values is to move the edge.

cursor: e-resize;

n-resize

north cursor

cursor: n-resize;

ne-resize

north cursor

cursor: ne-resize;

nw-resize

north-west cursor

cursor: nw-resize;

s-resize

south cursor

cursor: s-resize;

se-resize

south-east cursor

cursor: se-resize;

sw-resize

south-west cursor

cursor: sw-resize;

w-resize

west cursor

cursor: w-resize;

ew-resize

east-west cursor

cursor: ew-resize;

ns-resize

north-west cursor

cursor: nw-resize;

nesw-resize

north-east-south-west bidirection cursor.

cursor: nesw-resize;

nwse-resize

north-west-south-east bidirection cursor.

cursor: nesw-resize;

col-resize

column resizable

cursor: col-resize;

row-resize

row resizable

cursor: row-resize;

all-scroll

It indicates that an object can be scrolled.

cursor: all-scroll;

zoom-in

magnifying glass with +ve sign.

cursor: zoom-in;

zoom-out

magnifying glass with -ve sign.

cursor: zoom-out;

ltrDefault

It specifies the direction of content from left to right.

direction: ltr;

rtl

It specifies the direction of content from right to left.

direction: rtl;

block

The element behaves as block-level element.

display: block;

inline

The element behaves as inline-level element.

display: inline;

table

The element behaves as table (<table> </table>) element.

display: table;

flex

The element represents a flex container and constitutes all the flex properties.

display: flex;

grid

The element represents a grid structure.

display: grid;

table-row-group

In this case, the content that overflows vertically out of the box becomes invisible.

display: table-row-group;

table-header-group

In this case, the content that overflows vertically out of the box becomes invisible.

display: table-header-group;

table-footer-group

In this case, the content that overflows vertically out of the box becomes invisible.

display: table-footer-group;

table-row

The element represents a table-row element (<tr>)

display: table-row;

table-cell

The element represents a table-cell element (<td>)

display: table-cell;

table-column-group

The element represents a table-column-group (<colgroup/> <colgroup/>).

display: table-column-group;

table-column

The element represents a table-column-group (<col/> <col/>).

display: table-column;

table-caption

It behaves the same way as caption element (<caption>).

display: table-caption;

none

It does not display the element.

display: none;

inline-block

It behaves as block-level element but floating on the same line (if space available).

display: inline-block;

inline-table

It behaves as table element but floating on the same line (if space available).

display: inline-table;

inline-flex

It behaves as flex container but floating on the same line (if space available).

display: inline-flex;

inline-grid

It behaves as grid container but floating on the same line (if space available).

display: inline-flex;

showDefault

The table cell is visible even if there is no content within table cell.

hide

The table cell is not visible when content is not present within table cell.

currentColorDefault

currentColor keyword represents the same fill as of text color.

fill: currentColor;

color-name

The following demo represents skyblue fill.

fill: skyblue;

rgb value

It represents rgb value of a color.

The rgb value of red fill is given below.

fill: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of color.

The hexadecimal notation of blue fill is given below.

fill: #0000ff;

noneDefault

No filter is applied to the element.

filter: none;

blur(+ve length)

It applies blur to an element.

It accepts only length value and not percentage value.

filter: blur(10px);

brightness(+ve-length or +ve-percentage)

It determines the brightness of an element. 100% or 1 value does not affect the element while other values within the range (0-1 or 0%-100%) show an effect.

filter: brightness(50%);

contrast(+ve-length or +ve-percentage)

It defines the contrast behavior of content. 100% value does not affect while the other values within the range (0-1 or 0%-100%) show a contrast behavior. 0% values show fully grayscale.

filter: contrast(50%);

drop-shadow(X-offset   Y-offset   blur-radius   color)

It applies drop-shadow to the box (element). The parameter consists of horizontal-offset, vertical-offset, blur-radius, and color of the shadow.

filter: drop-shadow(5px 5px 5px rgba(230,230,230,1));

grayscale(+ve-length or +ve-percentage)

It converts an element into grayscale. 100% value means full grayscale.

filter: grayscale(50%);

hue-rotate(angle)

It represents hue rotation on the element. Actually, the parameter defines the number of degrees around the color circle to which the samle colors will be adjusted.

filter: hue-rotate(30deg);

invert(+ve-length or +ve-percentage)

It completely inverts the sample of the element. The argument value defines the proportion of conversion. 0% does not affect the element. While 100% completely inverts the element.

filter: invert(50%);

opacity(+ve-length or +ve-percentage)

It represents transparency of the object (element). 0% or 0 is fully opaque. And 100% or 1 is fully transparent.

filter: opacity(60%);

sepia(+ve-length or +ve-percentage)

converts an input element or image to sepia. Values vary between 0% (0) and 100% (1).

filter: sepia(30%);

autoDefault

The width of content-box is resolved to fit the content completely.

flex-basis: auto;

+ve integer

It specifies the width of the content-box of the flex item. Remember that this value does not include border-box and padding area.

rowDefault

The progress of flow of content is from left to right i.e. main-start to main-end for horizontal writing mode.

flex-direction: row;

row-reverse

The progress of flow of content is from right to left i.e. main-start and main-end are swapped for horizontal writing mode.

flex-direction: row-reverse;

column

The progress of flow of content is from top to bottom i.e. cross-start to cross-end for horizontal writing mode.

flex-direction: column;

column-reverse

The content flows from bottom to top i.e. cross-start and cross-end are swapped for horizontal writing mode.

flex-direction: column-reverse;

+ve integerDefault

The flex items do not expand to fill the remaining space.

flex-grow: 0;

+ve integer

The flex items expand to fill the free remaining space relative to the other items.

flex-grow: 1;

+ve integerDefault

The flex items shrink to fill the free remaining space relative to the other items.

flex-shrink: 1;

+ve integer

The flex items do not shrink to fill the remaining space.

flex-shrink: 0;

nowrapDefault

The content flows across one line within flex-container.

wrap

The content flows across multiple lines within flex-container.

wrap-reverse

The content flows across multiple lines and the lines are stacked in reverse order i.e. the cross-axis is reversed.

noneDefault

The element does not float to any direction.

float: none;

left

The element floats on to the left side.

float: left;

right

The element floats on to the right side.

float: right;

serifDefault

The fonts that proportionaly-spaced and have thick or thin strokes than fonts.

font-family: serif;

sans-serif

sans-serif means without sharp strokes. The fonts that have plain stroke endings i.e. there are sharp or cross strokes.

font-family: sans-serif;

cursive

They are not formal type fonts. They look as if they have been written by a brush or hand.

font-family: cursive;

fantasy

fantasy fonts are more decorative and contain expressive representation of characters.

font-family: fantasy;

monospace

It looks like computer code. It represents text as if typed by a keyboard.

font-family: monospace;

list of families

We may use comma separated list of family names. This list should end up with a generic-family.

And if one family is not rendered by the browser, the next one will be used. If all the families are not rendered by browser, the generic-family must be used.

font-family: courier, monospace;

"dlig"Default

dlig represents discretionary ligatures

font-feature-settings: "dlig" 1;

"smcp"

It represents small capitals.

font-feature-settings: "smcp" on;

'c2sc'

It enables capitals to small capitals.

font-feature-settings: 'c2sc';

"liga"

It disables common ligatures.

font-feature-settings: "liga" off;

"tnum", 'hist'

It enables tabular numbers and historical forms.

font-feature-settings: "tnum", 'hist';

"silly"

Tag is too long.

font-feature-settings: "silly" on;

"PKRN"

It enables custom features.

font-feature-settings: "PKRN";

autoDefault

It specifies that kerning is applied at the discretion.

font-kerning: auto;

normal

kerning is applied.

font-kerning: normal;

none

No kerning is applied.

font-kerning: none;

mediumDefault

It represents medium sized font.

font-size: medium;

xx-small

transition starts its execution as soon as it starts.

font-size: xx-small;

x-small

transition starts its execution as soon as it starts.

font-size: x-small;

small

transition starts its execution as soon as it starts.

font-size: small;

medium

transition starts its execution as soon as it starts.

font-size: medium;

large

transition starts its execution as soon as it starts.

font-size: large;

x-large

transition starts its execution as soon as it starts.

font-size: x-large;

xx-large

transition starts its execution as soon as it starts.

font-size: xx-large;

larger

transition starts its execution as soon as it starts.

font-size: larger;

smaller

transition starts its execution as soon as it starts.

font-size: smaller;

length

transition starts its execution as soon as it starts.

font-size: 22px;

percentage

transition starts its execution as soon as it starts.

font-size: 150%;

normalDefault

none value adds no style to the font.

italic

italic style is cursive in nature.

oblique

It represents slanted text at some angle. It is actually a sloped version (at angle) of regular font.

normal

none value adds no style to the font.

font-variant: normal;

italic

represents italic type font.

font-variant: italic;

oblique

It represents slanted text at some angle. Positive value of angle represents clockwise slant. And the negative one represents anti-clockwise slant. If there is no angle, it represents 14deg.

font-variant: normal;

normalDefault

No features are added to the font.

font-variant-caps: normal;

small-caps

It transforms the text to uppercase form but with the smallest size as of lowercase letters. It enables small capitals.

font-variant-caps:small-caps;

all-small-caps

It enables display of small capitals for both uppercase and lowercase letters.

font-variant-caps: all-small-caps;

petite-caps

displays peptite capitals.

font-variant-caps: petite-caps;

all-petite-caps

displays peptite capitals for both uppercase and lowercase letters.

font-variant-caps: all-petite-caps;

unicase

displays mixture of small capitals for uppercase letters with normal lowercase letters.

font-variant-caps: unicase;

normal

400 value represents a light weight font.

font-variant-numeric: normal;

lining-nums

700 value represents a bold weight font.

font-variant-numeric: lining-nums;

oldstyle-nums

700 value represents a bold weight font.

font-variant-numeric: oldstyle-nums;

proportional-nums

700 value represents a bold weight font.

font-variant-numeric: proportional-nums;

tabular-nums

700 value represents a bold weight font.

font-variant-numeric: tabular-nums;

diagonal-fractions

700 value represents a bold weight font.

font-variant-numeric: diagonal-fractions;

409,280 2 1/3

stacked-fractions

700 value represents a bold weight font.

font-variant-numeric: stacked-fractions;

409,280 2 1/3

ordinal

700 value represents a bold weight font.

font-variant-numeric: ordinal;

slashed-zero

700 value represents a bold weight font.

font-variant-numeric: slashed-zero;

409,280 2 1/3

value

400 value represents a light weight font.

font-weight: 400;

value

600 value represents a bold weight font.

font-weight: 600;

normal

normal represents normal text. It is same as 400.

font-weight: normal;

bold

represents bold text. It is same as 600.

font-weight: bold;

bolder

It represents bolder font-weight than the inherited value.

font-weight: bolder;

lighter

It represents lighter font weight than the inherited value.

font-weight: lighter;

autoDefault

The column occupies all the available space.

grid-auto-columns: auto;

track-size

The track size of second column is 40px defined implicitly. This pattern may be repeated to place more items in more columns.

grid-auto-columns: 40px;

track-size

The track size of second column is 120px defined implicitly.

grid-auto-columns: 120px;

rowDefault

It automatically places an item in the row and finds the next row automatically to place an item in that row.

grid-auto-flow: row;

column

It automatically places an item in the column and finds the next column automatically to place an item in that row.

grid-auto-flow: column;

autoDefault

The row occupies all the available space.

grid-auto-rows: auto;

track-size

The track size of second row is 40px defined implicitly. This pattern may be repeated to place more items in more columns.

grid-auto-rows: 40px;

track-size

The track size of second row is 120px defined implicitly.

grid-auto-rows: 120px;

CSS grid-area specifies an area on grid to place an item. It is either specified by four grid lines (grid-row-start, grid-column-start, grid-row-end, grid-column-end) or named-area (defined by grid-template-areas). If only one or two values are specified, the other values are set to auto.

We have a grid that consists of 3 rows, 3 columns, 4 horizontal grid lines and 4 vertical grid lines.

grid-line/grid-line

'1/2' means the grid-row-start and grid-column-start are 1 and 2 respectively. The other two values are set to auto.

grid-area: 1/2;

grid-line/grid-line/grid-line/grid-line

'2/3/2/3' means the grid-row-start, grid-column-start, grid-row-end, and grid-column-end are 2, 3, 2, and 3 respectively.

grid-area: 2/2/3/3;

named-area

'c' is the name area that we'll use to place an item.

grid-area: c;

CSS grid-column specifies the vertical grid lines to place an item in between. It is a shorthand property of grid-column-start and grid-column-end.

We have a grid that consists of 3 columns and 4 grid lines.

start/end

'1/2' means the item is placed between grid lines 1 and 2 i.e. within the first column.

grid-column: 1/2;

start/end

'2/3' means the item is placed between grid lines 2 and 3 i.e. within the second column.

grid-column: 2/3;

start/end

'3/4' means the item is placed between grid lines 3 and 4 i.e. within the third column.

grid-column: 3/4;

start/span columns

The first value represents the grid line and the second value after the span represents the number of columns occupied by the item.

grid-column: 1/span 2;

CSS grid-column-end represents vertical named or numbered grid line where the placement of an item ends.

We have a grid that consists of three (3) columns and four (4) grid lines. Suppose we have grid-column-start: 1; i.e. the placement of grid item starts from first grid line.

number

It represents the last grid line where the placement of an item ends.

'2' means the item is placed between grid line 1 to 2 i.e. within one column.

grid-column-end: 2;

number

'3' means the item is placed between grid line 1 to 3 i.e. within two columns.

grid-column-end: 3;

number

'4' means the item is placed between grid line 1 to 4 i.e. within three columns. Now, the item occupies the whole grid.

grid-column-end: 4;

CSS grid-column-start represents vertical named or numbered grid line where the placement of an item starts.

We have a grid that consists of three (3) columns and four (4) grid lines. Suppose we have grid-column-end: 4; i.e. the placement of grid item ends at grid line 4.

number

It represents the last grid line where the placement of an item ends.

'3' means the item is placed between grid line 3 to 4 i.e. within last one column.

grid-column-start: 3;

number

'2' means the item is placed between grid line 2 to 4 i.e. within last two columns.

grid-column-start: 2;

number

'1' means the item is placed between grid line 1 to 4 i.e. within last three columns. Now, the item occupies the whole grid.

grid-column-start: 1;

start/end

'1/2' means the item is placed between grid lines 1 and 2 i.e. within the first row.

grid-row: 1/2;

start/end

'2/3' means the item is placed between grid lines 2 and 3 i.e. within the second row.

grid-row: 2/3;

start/end

'3/4' means the item is placed between grid lines 3 and 4 i.e. within the third row.

grid-row: 3/4;

start/span columns

The first value represents the grid line and the second value after the span represents the number of rows occupied by the item.

grid-row: 1/span 2 ;

CSS grid-row-end represents horizontal named or numbered grid line where the placement of an item ends.

We have a grid that consists of three (3) rows and four (4) grid lines. Suppose we have grid-row-start: 1; i.e. the placement of grid item starts from first grid line.

number

It represents the last grid line where the placement of an item ends.

'2' means the item is placed between grid line 1 to 2 i.e. within one row.

grid-row-end: 2;

number

'3' means the item is placed between grid line 1 to 3 i.e. within two rows.

grid-row-end: 3;

number

'4' means the item is placed between grid line 1 to 4 i.e. within three rows. Now, the item occupies the whole grid.

grid-row-end: 4;

number

It represents the last grid line where the placement of an item ends.

'3' means the item is placed between grid line 3 to 4 i.e. within last one column.

grid-row-start: 3;

number

'2' means the item is placed between grid line 2 to 4 i.e. within last two rows.

grid-row-start: 2;

number

'1' means the item is placed between grid line 1 to 4 i.e. within last three rows. Now, the item occupies the whole grid.

grid-row-start: 1;

strings

We are observing an item that occupies the area 'b'. 'b' area consists of two cells in the first row.

grid-template-areas: "a a b b" "c c d d" "e e f f";

strings

'b' area is occupying the three cells in the second row.

grid-template-areas: "a a a a" "b b b c" "d d e f";

strings

'b' area is occupying four cells in the last row.

grid-template-areas: "a a a a" "c d e f" "b b b b";

col1 col2Default

The grid consists of two columns each with 50% width. The item occupies the second column (50%).

grid-template-columns: 50% 50%;

col1 col2 col3

The grid consists of three columns with 20px, 30%, and 1fr sizes. 1fr means remaining fractional size. The item occupies the second column (30%).

grid-template-columns: 20px 30% 1fr;

col1 col2 col3

The grid consists of three columns with 30px, 50px, and 1fr sizes. The item occupies the second column (50px).

grid-template-columns: 30px 50px 1fr;

row1 row2Default

The grid consists of two rows each with 50% width. The item occupies the second row (50%).

grid-template-rows: 50% 50%;

row1 row2 row3

The grid consists of three rows with 20px, 30%, and 1fr sizes. 1fr means remaining fractional size. The item occupies the second row (30%).

grid-template-rows: 20px 30% 1fr;

row1 row2 row3

The grid consists of three rows with 20px, 50px, and 1fr sizes. The item occupies the second row (50px).

grid-template-rows: 20px 50px 1fr;

auto

auto value means the height will be changed automatically according to the content.

height: auto;

length

The height of an element should be at least 30px.

height: 300px;

percentage

The height of an element should be 30% of the parent box.

height: 30%;

min-content

min-content value represents that the height of an element must be equal to or greater than the largest minimum height of some descendant item i.e. it depends upon the minimum size of child element.

In this case, the min-height of descendant element is 100px.

height: min-content;

max-content

max-content value means the height of an element must be equal to or greater than the largest maximum height of some descendant item i.e. it depends upon the miximum size of child element.

In this case, the max-height of descendant element is 200px.

height: max-content;

autoDefault

auto value means the size will be changed automatically according to the content.

inline-size: auto;

+ve length

The inline-size of an element should be at least 300px.

inline-size: 300px;

+ve percentage

The size of an element should be 30% of the parent box.

inline-size: 30%;

normalDefault

It stretches out the descendant elements to fill the height completely.

justify-content: normal;

baseline

It aligns multiple objects (elements) on same shared space such as cells within a row.

justify-content: baseline;

center

It aligns the content elements at the middle of cotainer.

justify-content: center;

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

justify-content: stretch;

flex-start

flex-start aligns the content at the start of flex container.

justify-content: flex-start;

flex-end

flex-start aligns the content at the start of flex container.

justify-content: flex-end;

space-between

flex-start aligns the content at the start of flex container.

justify-content: space-between;

space-around

The objects are distributed in such a way that there is same space between the objects except at the start and end of the container.

There is half sized space (half of the space that is between any two objects) before the first object and after the last object.

justify-content: space-around;

space-evenly

It adjusts the alignment of objects so as to distribute equal space between and around the objects.

autoDefault

It stretches out the element vertically to fill the width of container completely.

justify-items: auto;

baseline

It aligns the element on the baseline.

justify-items: baseline;

center

It aligns the content at the middle of cotainer.

justify-items: center;

stretch

It stretches the element so as fill the width of container completely.

justify-items: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

justify-items: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

justify-items: flex-end;

autoDefault

It stretches out the element vertically to fill the width of container completely.

justify-self: auto;

baseline

It aligns the element on the baseline.

justify-self: baseline;

center

It aligns the content at the middle of cotainer.

justify-self: center;

stretch

It stretches the element so as fill the width of container completely.

justify-self: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

justify-self: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

justify-self: flex-end;

autoDefault

It does not replace the current box.

left: auto;

length

It represents the distance of the left side of the current box from the left side of the parent box.

The box is 100px away from the left side of the parent box (absolute position).

left: 100px;

percentage

Actually percentage represents height of the parent box.

The box is 20% away from the left side of the parent box (absolute position).

left: 20%;

normalDefault

In this case, no additional space is added i.e. it computes to 0 additional space.

letter-spacing: normal;

length

It adds 4px additional spacing between typographic units (letters, images, inline blocks) thus expanding the space.

letter-spacing: 4px;

normalDefault

In this case, no additional space is added i.e. it computes to 0 additional space.

line-height: normal;

length

It adds 40px vertical additional spacing between lines of text.

line-height: 40px;

percentage

percentage value represents the percentage of default line-height.

line-height: 140%;

noneDefault

no image is used as the content of list item markers. In this case, list-style-type defines the type of list item markers.

list-style-image: none;

url(image-address)

It defines the address of the image that is used as the content of list item markers.

list-style-image: url('img/web4college.png');

outside Default

The table cell is visible even if there is no content within table cell.

list-style-position: outside;

inside

In this case, the markers become a part of the list item content.

list-style-position: inside;

discDefault

disc as item markers.

list-style-type: disc;

circle

circle as item markers.

list-style-type: circle;

decimal

decimal number as item markers

list-style-type: decimal;

decimal-leading-zero

decimal number as item markers with leading zero.

list-style-type: decimal-leading-zero;

lower-roman

lower roman numbers as item markers

list-style-type: lower-roman;

upper-roman

upper roman numbers as item markers.

list-style-type: upper-roman;

lower-greek

lower greek letters as item markers

list-style-type: lower-greek;

lower-latin

lower case latin letters as item markers

list-style-type: lower-latin;

upper-latin

upper case latin letters as item markers

list-style-type: upper-latin;

lower-alpha

lower alphabets as item markers.

list-style-type: lower-alpha;

upper-alpha

upper aphabets as item markers

list-style-type: upper-alpha;

armenian

armenian letters as item markers

list-style-type: armenian;

georgian

georgian letters as item markers

list-style-type: georgian;

lengthDefault

There is no thickness of the margin area on the bottom side of the border box.

margin-bottom: 0;

+ve length

There is 20px space on the bottom side of the box.

margin-bottom: 20px;

-ve length

The space on the bottom side of the border decreases by 20px i.e. the content below this box may merge into this box.

margin-bottom: -20px;

0 length

There is no thickness of the margin area on the left side of the border box.

margin-left: 0;

+ve length

There is 20px space on the left side of the box.

margin-left: 20px;

-ve length

The space on the left side of the border decreases by 20px i.e. it may move on the left side.

margin-left: -20px;

0 length

There is no thickness of the margin area on the right side of the border box.

margin-right: 0;

+ve length

There is 20px space on the right side of the box.

margin-right: 20px;

-ve length

The space on the right side of the border decreases by 20px i.e. the content on the right side may merge into this box.

margin-right: -20px;

lengthDefault

There is no thickness of the margin area on the top side of the border box.

margin-top: 0;

+ve length

There is 20px space on the top side of the box.

margin-top: 20px;

-ve length

The space on the top side of the border decreases by 20px i.e. it may move upwards.

margin-top: -20px;

noneDefault

It does not add any marker at the vertices.

marker: none;

marker-reference

It draws a marker at all the vertices of markable element.

marker: url(#Triangle);

noneDefault

IIt does not add any marker at the last vertices of markable element.

marker-end: none;

marker-reference

It draws a marker at the last vertices of markable element.

marker-end: url(#Triangle);

noneDefault

It does not add any marker at the vertices.

marker-mid: none;

marker-reference

It draws a marker at all the vertices of markable elements except the first and last vertices.

marker-mid: url(#Triangle);

noneDefault

It does not add any marker at the first vertices of markable element.

marker-start: none;

marker-reference

It draws a marker at the first vertices of markable element.

marker-start: url(#Triangle);

addDefault

The source layer is placed over the target layer.

mask-composite: add;

subtract

The destination mask layer will be subtracted from the source layer and then only the remaining source layer is visible.

mask-composite: subtract;

intersect

Only the intersected portion of both layers is visible.

mask-composite: intersect;

exclude

It is opposite to that of 'intersect' i.e. the portions of both layers that don't intersect are visible.

mask-composite: exclude;

clear

It does not enable any layer.

mask-composite: clear;

copy

Only the source layer is visible.

mask-composite: copy;

source-over

It places the source layer over the destination layer.

mask-composite: source-over;

destination-over

It places the destination layer over the source layer.

mask-composite: destination-over;

source-in

represents only the source area that overlaps the destination layer.

mask-composite: source-in;

destination-in

represents only the destination area that overlaps the source layer.

mask-composite: destination-in;

source-out

It represents the portion of source layer that falls outside the overlapping area.

mask-composite: source-out;

destination-out

It represents the portion of destination layer that falls outside the overlapping area.

mask-composite: destination-out;

source-atop

It represents both the overlapping area and destination area.

mask-composite: source-atop;

destination-atop

It represents both the overlapping area and source area.

mask-composite: destination-atop;

xor

The non-overlapping regions of both the source and destination layers.

mask-composite: xor;

border-boxDefault

There is no thickness of the margin area on the top side of the border box.

mask-clip: border-box;

padding-box

In this case, the mask of the areas that are within padding-box are painted such as the padding and content areas.

mask-clip: padding-box;

content-box

Only mask of content-area is painted i.e. excluding the other two areas.

mask-clip: content-box;

noneDefault

It does not add any mask to an element.

mask-image: none;

border-boxDefault

It adds an image as the mask.

mask-image: url(img/web4college.png);

padding-boxDefault

The mask image is positioned relative to the padding box.

mask-origin: padding-box;

border-box

The mask image is positioned relative to the border box.

mask-origin: border-box;

content-box

The mask image is positioned relative to the content box.

mask-origin: content-box;

X-offset Y-offsetDefault

Horizontal offset is 0% which means 0% width of the mask image is under 0% width of the mask positioning area from the left side.

Vertical offset is 0% which means that 0% height of the mask image is under 70% height of the mask positioning area from the top side.

mask-position: 0% 0%;

X-offset Y-offset

Horizontal offset is 40% which means 40% width of the mask image is under 40% width of the mask positioning area from the left side.

Vertical offset is 70% which means that 70% height of the mask image is under 70% height of the mask positioning area from the top side.

mask-position: 40% 70%;

XY-offset

This one value represents both vertical and horizontal offsets.

For examples, 30% value means 30% is horizontal offset and 50% is vertical offset (default). It computes to 30% 50%.

mask-position: 30%;

left

The mask image is aligned on the left side horizontally (first value is 0%). And it is aligned at the center vertically (default). It computes to 0% 50%.

mask-position: left;

center

This value aligns the mask image horizontally and vertically at the center. It computes to 50% 50%.

mask-position: center;

right

This value aligns the mask image horizontally on the right side (first value is 100%). It computes to 100% 50%

mask-position: right;

top

top value vertically aligns the mask image at the top (second value is 0%). It computes to 50% 0%.

mask-position: top;

bottom

bottom value aligns an image vertically at the bottom (second value is 100%). It computes to 50% 100%.

mask-position: bottom;

repeatDefault

The mask mask image is repeated along both axes to fill the painting area completely. It is the same as repeat repeat.

mask-repeat: repeat;

no-repeat

The mask image should not be repeated to fill the painting area.

mask-repeat: no-repeat;

repeat-x

The mask image is repeated along x-axis only. It is the same as repeat no-repeat

mask-repeat: repeat-x;

repeat-y

The mask image is repeated along y-axis only. It is the same as no-repeat repeat

mask-repeat: repeat-y;

space

In this case, the mask images are repeated and spaced out (kept at a distance) so as to fill the painting area completely. The first and last mask images must touch the corners of the painting area.

mask-repeat: space;

round

The image is repeated untill it fills the background painting area. If it does not fit the painting area a whole number of times, the mask image is rescaled so as to fit the area.

mask-repeat: round;

autoDefault

The size of mask image is automatically calculated.

mask-size: auto;

contain

The image is rescaled to the largest size such that both sides of the image fit inside the mask painting area while preserving the aspect ratio.

mask-size: contain;

cover

The image is rescaled to the smallest size such that it covers the mask painting area completely while preserving the aspect ratio.

mask-size: cover;

length

We specify fixed length for the mask image size.

mask-size: 20px;

length

It represents the image size as the percentage of mask painting area.

30% means the mask image occupies the 30% of element. And three images can fill the painting area of element with this size.

mask-size: 30%;

noneDefault

No limit of height is applied to an element.

max-height: none;

min-content

min-content value specifies the largest minimum height of some descendant item.

The height of the current element will be equal to the descendant element that has smallest height.

max-height: min-content;

max-content

max-content value represents that the largest maximum height of some descendant item.

The height of the current element will be equal to the descendant element that has largest height.

max-height: max-content;

length

length value specifies the maximum height of the element.

30px value means the height of an element can't exceed 30px no matter how much content is inside this element.

max-height: 30px;

auto

auto value means the height will be changed automatically according to the content.

max-height: auto;

noneDefault

No limit of width is applied to an element.

max-width: none;

min-content

min-content value specifies the largest minimum width of some descendant item.

max-width: min-content;

max-content

min-content value specifies the largest minimum width of some descendant item.

max-width: max-content;

+ve length

30px value specifies the maximum width of the element.

max-width: 30px;

+ve percentage

30% means the width of current box can not exceed 30% of the parent box.

max-width: 30%;

auto

auto value means the width will be changed automatically according to the content.

max-width: auto;

noneDefault

No limit of height is applied to an element.

min-height: none;

min-content

min-content value specifies that the minimum height of element must be equal to or greater than the largest minimum height of some descendant item.

min-height: min-content;

max-content

max-content value represents that the minimum height of element must be equal to or greater than the largest maximum height of some descendant item.

min-height: max-content;

+ve length

The height of element should be at least 300px.

min-height: 300px;

+ve percentage

The height of element should be at least 30% of the parent box.

min-height: 30%;

auto

auto value means the height will be changed automatically according to the content.

min-height: auto;

noneDefault

No limit of width is applied to an element.

min-width: none;

min-content

min-content value specifies that the minimum width of element must be equal to or greater than the largest minimum width of some descendant item.

min-width: min-content;

max-content

max-content value represents that the minimum width of element must be equal to or greater than the largest maximum width of some descendant item.

min-width: max-content;

+ve length

The width of element should be at least 300px.

min-width: 300px;

auto

auto value means the width will be changed automatically according to the content.

min-width: auto;

normalDefault

No blending is applied.

mix-blend-mode: normal;

multiply

It multiplies the backdrop (image) with the source (background-color) and replaces those changes in the backdrop.

mix-blend-mode: multiply;

screen

It multiplies the backdrop (image) with the source color and then complements.

mix-blend-mode: screen;

screen

It multiplies or screens the colors depending on the backdrop (image) color.

mix-blend-mode: overlay;

darken

It selects the darker color of the backdrop (image).

mix-blend-mode: darken;

lighten

It selects the lighten color of the backdrop (image).

mix-blend-mode: lighten;

color-dodge

It brightens the backdrop (image) to reflect the source color.

mix-blend-mode: color-dodge;

color-burn

It darkens the backdrop (image) to reflect the source color.

mix-blend-mode: color-burn;

hard-light

It multiplies or screens the colors depending on the source color.

mix-blend-mode: hard-light;

soft-light

It darkens or lightens the colors depending on the source color.

mix-blend-mode: soft-light;

difference

It subtracts darker color from the lighter color.

mix-blend-mode: difference;

exclusion

It produces the same effect but lower in contrast.

mix-blend-mode: exclusion;

hue

It creates a color with the hue of source color and the saturation and luminosity of the backdrop (image).

mix-blend-mode: hue;

saturation

It creates a color with the saturation of source color and the hue and luminosity of the backdrop (image).

mix-blend-mode: saturation;

color

It creates a color with the hue and the saturation of the source color and luminosity of the backdrop (image).

mix-blend-mode: color;

luminosity

It creates a color with the luminosity of the source color and the hue and saturation of the backdrop (image).

mix-blend-mode: luminosity;

fully opaqueDefault

The object (element) is fully opaque.

opacity: 1;

fully transparent

The object (element) is fully transparent.

opacity: 0;

partially transparency

It represents 50% transparency of the object (element).

opacity: 0.5;

integerDefault

An integeral value determines the order of flex item in a flex container. 0 value does not change the position of flex item.

order: 0;

integer

-1 value positions the third flex item at the start of container.

This value positions the third item (3) at the start of flex container.

order: -1;

+ve integer

1 value positions the third flex item at the end of flex container. This value positions the third item at the end of flex container

This value positions the third item (3) at the end of flex container.

order: 1;

length

length value represents space between border or element (if there is no border) and outline.

outline-offset: 5px;

currentColorDefault

currentColor keyword represents the same color for the top side border as of text color.

outline-color: currentColor;

color-name

The following demo represents skyblue color for the top side border.

outline-color: skyblue;

rgb value

It represents rgb value of a color.

The hexadecimal value of red color for the top side border is given below.

outline-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the top side border is given below.

outline-color: #0000ff;

noneDefault

There is no style. In this case, the color and width of outline are also ignored i.e. 0px outline.

outline-style: none;

dashed

The outline consists of a series of square shaped dashes.

outline-style: dashed;

dotted

The outline consists of a series of round dots.

outline-style: dotted;

solid

The outline consists of a solid line.

outline-style: solid;

double

The outline consists of two lines. The total ouline-width equals to the two lines and space between them.

outline-style: double;

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the outline-color.

The outer side of the outline is darker than the inner side of the outline.

outline-style: ridge;

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the outline is darker than the outer side of the outline.

outline-style: groove;

mediumDefault

medium value represents medium sized outline. thin≤medium≤thick

outline-side: medium;

thin

thin value defines thin outline .

outline-width: thin;

thick

thick value defines a thick outline.

outline-side: thick;

thick

length defines the width of outline. The used units might be px, in, em, pt.

outline-width: 10px;

visibleDefault

The content overflows out of the boundaries of the box and is also visibile.

It is the same as overflow: visibile visibile;

overflow: visible;

hidden

In this case, the content that overflows out of the box becomes invisible.

It is the same as overflow: hidden hidden;.

overflow: hidden;

scroll

It provides scrollbar no matter whether the content overflows or not.

It is the same as overflow: scroll scroll;.

overflow: scroll;

auto

It is same as 'scroll' but its scrollbar is visibile only when the content overflows out of the box.

Both values are 'auto' i.e. overflow: auto auto;

overflow: auto;

normalDefault

In this case, the lines only break at allowed break points i.e. between the words and not between the letters.

In this case, the words are unbreakable on wrapping.

overflow-wrap: normal;

break-word

It applies to an element only when there are no acceptable break points available i.e. between the words.

`

It breaks the words at arbitrary points.

overflow-wrap: break-word;