A list of 300+ CSS properties

There are more than 500 CSS properties but the browsers only support around 300+ properties. That's why we have prepared the list of 300 CSS properties with values which the current browsers support. This is not just a list. You can explore and practice each property.

CSS align-content

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.

align-content property

normalDefault

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

align-content: normal;

#Item1

#Item2

#Item3

baseline

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

text-align: baseline;

#Item1

#Item2

#Item3

center

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

align-content: center;

#Item1

#Item2

#Item3

stretch

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

align-content: stretch;

#Item1

#Item2

#Item3

flex-start

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

align-content: flex-start;

#Item1

#Item2

#Item3

flex-end

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

align-content: flex-end;

#Item1

#Item2

#Item3

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;

#Item1

#Item2

#Item3

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;

#Item1

#Item2

#Item3

space-evenly

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

align-content: space-evenly;

#Item1

#Item2

#Item3

CSS align-items

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

align-content property

normalDefault

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

align-items: normal;

Child element

baseline

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

align-items: baseline;

Child element

center

It aligns the content in the middle of the container.

align-items: center;

Child element

stretch

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

align-items: stretch;

Child element

flex-start

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

align-items: flex-start;

Child element

flex-end

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

align-items: flex-end;

Child element

CSS align-self

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

align-content property

autoDefault

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

align-self: auto;

Self element

baseline

It aligns the element on the normal baseline.

align-self: baseline;

Self element

center

It aligns an element at the middle of cotainer.

align-self: center;

Self element

stretch

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

align-self: stretch;

Self element

flex-start

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

align-self: flex-start;

Self element

flex-end

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

align-self: flex-end;

Self element

CSS animation

animation : animation-name    animation-duration    animation-delay    animation-direction    animation-iteration-count    animation-play-state    animation-fill-mode    animation-timing-function

CSS animation-delay

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

+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;

CSS animation-direction

CSS animation-direction property represents the direction of all or some animation cycles in the same or reverse direction.

In this case, all the animation timing functions such as ease-in, ease-out, ease-in-out are also reversed. For example, ease-in in normal direction becomes ease-out in the reverse direction.

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;

CSS animation-duration

CSS animation-duration property defines the total duration of one animation cycle. We take an example of animation with different values for animation-duration.

Negative values are not allowed.

+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;

CSS animation-fill-mode

It applies CSS properties to an element that are picked from the end of last animation cycle or from the start of first animation cycle during the idle time i.e. during the animation delay.

We take an example with 3s animation-duration and 1s animation-delay.

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;

CSS animation-iteration-count

CSS animation-iteration-count property represents the number of times an animation cycle repeats itself.

+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;

CSS animation-name

CSS animation-name property represents a list of one or more keyframe-names separated by comma. Each keyframe-name applies property values to an element.

We take an example of animation with one or more keyframe rules.

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;

CSS animation-play-state

CSS animation-play-state property represents whether the animation is in a running or paused state.

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;

CSS animation-timing-function

CSS animation-timing-function defines how the animation progress between different time intervals of a keyframe.

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;

CSS backface-visibility

CSS background is a shorthand property of background-position, background-image, background-size, background-repeat, background-attachment, and background-clip property.

The following syntax represents only one layer. We can get more layers by repeating the following syntax. These layers are separated with a comma.

visible Default

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

backface-visibility: visibile;

We are learning backface-visibility property.

hidden

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

backface-visibility: hidden;

We are learning backface-visibility property.

CSS background

CSS background is a shorthand property of background-position, background-image, background-size, background-repeat, background-attachment, and background-clip property.

The following syntax represents only one layer. We can get more layers by repeating the following syntax. These layers are separated with a comma.

background : background-color   background-image   background-position   /   background-size   background-repeat   background-attachment   background-origin   background-clip

CSS background-attachment

CSS background-attachment property represents the position of background image for an element with respect to viewport (visible area of web page) or other content within the same element.

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;

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

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;

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

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;

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

The background is fixed with respect to the viewport.

The background scrolls with respect to the viewport.

The background remains fixed with respect to the element's contents. But it may move with the conent when scrolling is possible within the element.

CSS background-blend-mode

This property blends multiple background images. It has the same values as mix-blend-mdoe. The background-image may consist of image url or gradient.

background-blend-mode : normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

CSS background-clip

CSS background-clip property specifies the boundary of the background painting area.

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;

We are observing background-clip property for different values of the background-clip property.

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;

We are observing background-clip property for different values of the background-clip property.

content-box

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

background-clip: content-box;

We are observing background-clip property for different values of the background-clip property.

CSS background-color

CSS background-color property defines the background-color of an element.

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;

CSS background-image

CSS background-image property adds an image as the background of an element. More than one images can also be used (subsequently lying over each other) as the background with the first one on top and the last one at the bottom.

background-color should also be used to preserve the contrast between the image layer and other content when the image is not available.

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);

CSS background-origin

CSS background-origin property specifies the position of background image with respect to different components of box model i.e. we define a point where we start measuring for the background position.

We position the image to top left corner.

padding-boxDefault

The background image is positioned relative to the padding box.

background-origin: padding-box;

The image may be positioned with respect to any of the box area i.e. border, padding, and area box.

border-box

The background image is positioned relative to the border box.

background-origin: border-box;

The image may be positioned with respect to any of the box area i.e. border, padding, and area box.

content-box

The background image is positioned relative to the content box.

background-origin: content-box;

The image may be positioned with respect to any of the box area i.e. border, padding, and area box.

CSS background-position

The background images can be positioned within the background positioning area by using the keywords or percentage values given below.

There are always two values of background-position (horizontal and vertical offset). If only one value is specified the other one is assumed to be 50% or center.

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;

CSS background-repeat

CSS background-repeat property defines whether the image should be repeated or not if the painting area is larger than the image.

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;

CSS background-size

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%;

CSS block-size

autoDefault

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

block-size: auto;

block-size auto for horizontal writing mode
block-size: auto;
writing-mode: horizontal-tb;

block-size auto for vertical-lr writing mode
block-size: auto;
writing-mode: vertical-lr

block-size auto for vertical-rl writing mode
block-size: auto;
writing-mode: vertical-rl;

+ve length

It specifies the fixed size of a block.

block-size: 300px;

block-size length for horizontal writing mode
block-size: 300px;
writing-mode: horizontal-tb;

block-size length for vertical-lr writing mode
block-size: 300px;
writing-mode: vertical-lr

block-size length for vertical-rl writing mode
block-size: 300px;
writing-mode: vertical-rl;

CSS border

CSS border property defines width, style and color of the border for all the sides of a box. It is a shorthand property of border-width, border-style, and border-color.

border : border-width    border-style    border-color;

CSS border-block

CSS border-block is a logical property that defines border width, style, and color for the start and end sides. The selection of start and end sides depends upon the writing-mode.

It is a shorthand property of border-block-width, border-block-style, and border-block-color.

  • The start and end sides are top and bottom sides respectively for horizontal-tb writing-mode.

  • The start and end sides are left and right sides respectively for vertical-* writing-mode.

border-block : border-block-width    border-block-style    border-block-color;

CSS border-block-color

CSS border-block-color is a logical property that defines border color for the start and end sides of a block. The selection of start and end sides depends upon the writing-mode.

It is a shorthand property of border-block-start-color and border-block-end-color.

red green

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

border-block-color: red green;

Check the behavior of border-block-color for different values of writing mode.

writing-mode:horizontal-tb;

Check the behavior of border-block-color for different values of writing mode.

writing-mode:vertical-lr;

Check the behavior of border-block-color for different values of writing mode.

writing-mode:vertical-rl;

CSS border-block-end

CSS border-block-end is a logical property that defines width, style, and color for the end side border of a block. The selection of end side depends upon the writing-mode.

It is a shorthand property of border-block-end-width, border-block-end-style, border-block-end-color.

border-block-end : border-block-end-width    border-block-end-style    border-block-end-color

CSS border-block-end-color

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

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);

Check the behavior of border-block-end-color for different value of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-block-end-color for different value of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-block-end-color for different value of writing mode.

writing-mode:vertical-rl;

CSS border-block-end-style

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;

Check the behavior of border-block-end-style for different values of writing mode.

writing-mode:horizontal-tb;

Check the behavior of border-block-end-style for different values of writing mode.

writing-mode:vertical-lr;

Check the behavior of border-block-end-style for different values of writing mode.

writing-mode:vertical-rl;

CSS border-block-end-width

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

+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;

Check the behavior of border-block-end-width for different value of writing mode.

writing-mode:horizontal-tb;

Check the behavior of border-block-end-width for different value of writing mode.

writing-mode:vertical-lr;

Check the behavior of border-block-end-width for different value of writing mode.

writing-mode:vertical-rl;

CSS border-block-start

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

border-block-start : border-block-start-width    border-block-start-style    border-block-start-color

CSS border-block-start-color

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

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);

Check the behavior of border-block-start-color for different value of writing mode.

writing-mode:horizontal-tb;

Check the behavior of border-block-start-color for different value of writing mode.

writing-mode:vertical-lr;

Check the behavior of border-block-start-color for different value of writing mode.

writing-mode:vertical-rl;

CSS border-block-start-style

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

dashed

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

border-block-start-style: dashed;

Check the behavior of border-block-start-style for different values of writing mode.

writing-mode:horizontal-tb;

Check the behavior of border-block-start-style for different values of writing mode.

writing-mode:vertical-lr;

Check the behavior of border-block-start-style for different values of writing mode.

writing-mode:vertical-rl;

CSS border-block-start-width

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

+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;

Check the behavior of border-block-start-width for different value of writing mode.

writing-mode:horizontal-tb;

Check the behavior of border-block-start-width for different value of writing mode.

writing-mode:vertical-lr;

Check the behavior of border-block-start-width for different value of writing mode.

writing-mode:vertical-rl;

CSS border-block-style

CSS border-block-style is a logical property that defines border style for the start and end sides of a block. The selection of start and end sides depends upon the writing-mode.

It is a shorthand property of border-block-start-style and border-block-end-style.

border-block-style : border-block-start-style    border-block-end-style

CSS border-block-width

CSS border-block-width is a logical property property that defines border width for the start and end sides of a block. The selection of start and end sides depends upon the writing-mode. It is a shorthand property of border-block-start-width and border-block-end-width

border-block-width : border-block-start-width    border-block-end-width

CSS border-bottom

CSS border-bottom property defines the width, style, and color for the bottom side border of a box. It is a shorthand property of border-bottom-width, border-bottom-style, and border-bottom-color.

border-bottom : border-bottom-width    border-bottom-style    border-bottom-color;

CSS border-bottom-color

CSS border-bottom-color property defines the color for the bottom side border of a box.

currentColorDefault

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

border-bottom-color: currentColor;

The color of text is green. Therefore the currentColor for the border is also green.

color-name

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

border-bottom-color: skyblue;

The color of text is green. Therefore the currentColor for the border is also green.

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);

The color of text is green. Therefore the currentColor for the border is also green.

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;

The color of text is green. Therefore the currentColor for the border is also green.

CSS border-bottom-left-radius

CSS border-bottom-left-radius property defines the length of both horizontal and vertical radii of bottom-left quarter of a box i.e. coverts sharp corners to rounded corners.

+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%;

CSS border-bottom-right-radius

CSS border-bottom-right-radius property defines the length of both horizontal and vertical radii of bottom-right quarter of a box i.e. coverts sharp corners to rounded corners.

+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%;

CSS border-bottom-style

CSS border-bottom-style property defines style for the bottom side border of a block.

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;

We are learning border-bottom-style property

hidden

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

border-bottom-style: hidden;

We are learning border-bottom-style property

dashed

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

border-bottom-style: dashed;

We are learning border-bottom-style property

dotted

The bottom border consists of a series of round dots.

border-bottom-style: dotted;

We are learning border-bottom-style property

solid

The bottom border consists of a solid line.

border-bottom-style: solid;

We are learning border-bottom-style property

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;

We are learning border-bottom-style property

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;

We are learning border-bottom-style property

CSS border-bottom-width

CSS border-bottom-width property defines the width of bottom side border of a block.

medium

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

border-bottom-width: medium;

If the border-bottom-style is none then the border-bottom-width is of no use i.e. represents 0px.

thin

thin value defines thin line border for the bottom side.

border-bottom-width: thin;

If the border-bottom-style is none then the border-bottom-width is of no use i.e. represents 0px.

thick

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

border-bottom-width: thick;

If the border-bottom-style is none then the border-bottom-width is of no use i.e. represents 0px.

+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;

If the border-bottom-style is none then the border-bottom-width is of no use i.e. represents 0px.

CSS border-collapse

CSS border-collapse property defines whether to separate or collapse the borders of table cells. It is important to note that it applies to table element and not to the td or tr elements.

separateDefault

There is space between the borders of table cells.

border-collapse: separate;

Score
Name Aggregate Degree
Sheraz 70% BSC
Bilal 80% BIT
Aleem 90% BSE

collapse

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

border-collapse: collapse;

Score
Name Aggregate Degree
Sheraz 70% BSC
Bilal 80% BIT
Aleem 90% BSE

CSS border-color

CSS border-color property is a shorthand property of border-top-color, border-right-color, border-bottom-color, and border-left-color properties. It defines the color for all the sides of a block.

currentColorDefault

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

border-color: currentColor;

The color of text is green. Therefore the currentColor for the border is also green.

currentColorDefault

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

border-color: red green;

The color of text is green. Therefore the currentColor for the border is also green.

currentColorDefault

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

border-color: red green;

The color of text is green. Therefore the currentColor for the border is also green.

red green blue yellow

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

border-color: red green blue yellow;

The color of text is green. Therefore the currentColor for the border is also green.

CSS border-end-end-radius

CSS border-end-end-radius is a logical property that defines the length of both horizontal and vertical radii for the end-end corner a box i.e. coverting sharp corners into round shape corners.

The selection of end-end corner depends upon the writing-mode

  • The end-end corner is bottom-right corner for the horizontal-tb writing-mode.

  • The end-end corner represents bottom-right or bottom-left corner for the vertical-rl or vertical-lr writing-mode respectively.

CSS border-end-start-radius

CSS border-end-start-radius is a logical property that defines the length of both horizontal and vertical radii for the end-start corner a box i.e. coverting sharp corners into round shape corners.

The selection of end-start corner depends upon the writing-mode

  • The end-start corner is the bottom-left corner for the horizontal-tb writing-mode.

  • The end-start corner represents top-left or top-right corner for the vertical-rl or vertical-lr writing-mode respectively.

CSS border-image

CSS border-image property specifies the image as the border of a box. It is a shorthand property of border-image-source, border-image-slice, border-image-

border-image :border-image-source    border-image-slice    [ /border-image-width   |  / border-image-width / border-image-outset ]    border-image-repeat

CSS border-image-outset

It specifies the border image area that extends beyond the boundaries of border box.

lengthDefault

represents the width of border image outset.

border-image-outset: 0px;

It specifies the border image area that extends beyond the boundaries of border.

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;

It specifies the border image area that extends beyond the boundaries of border.

CSS border-image-repeat

It specifies how the images are laid out i.e. whether the border images should be repeated or not and what should be the orientation of placement of border images?

stretchDefault

The border image stretches itself to fill the border area.

border-image-repeat: stretch;

It specifies how the images are laid out.

repeat

The border image is repeated to fill the border area.

border-image-repeat: repeat;

It specifies how the images are laid out.

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;

It specifies how the images are laid out.

CSS border-image-slice

CSS border-image-slice specifies the inward offset from the top, right, bottom, and left sides of the image. The image is divided into nine parts( 4 corners, 4 edges, 1 middle part). But the middle part is transparent.

There are four values that specify the offset of the top, right, bottom, and left edges of the image.

+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%;

It specifies how the images are laid out.

+ve number

This number represents the pixels of image or coordinates.

border-image-width: 14;

It specifies how the images are laid out.

CSS border-image-source

CSS border-image-source specifies whether to use the image or border-style as the border area.

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');

CSS border-image-width

CSS border-image-width property specifies the width of the border image. By default, it is the same as border-width.

+ve lengthDefault

length value specifies the width of border image area.

border-image-width: 1px;

CSS border-image-width property specifies the width of the border image. By default, it is the same as border-width.

+ve percentage

percentage value specifies the width of border image area.

border-image-width: 30%;

CSS border-image-width property specifies the width of the border image. By default, it is the same as border-width.

+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;

CSS border-image-width property specifies the width of the border image. By default, it is the same as border-width.

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;

CSS border-image-width property specifies the width of the border image. By default, it is the same as border-width.

CSS border-inline

CSS border-inline is a logical property that defines border width, style, and color for the start and end sides. It is a shorthand property of border-inline-color, border-inline-style, and border-inline-width.

  • The start and end sides are left and right sides respectively for horizontal-tb writing-mode.

  • The start and end sides are top and bottom sides respectively for vertical-* writing-mode.

border-inline : border-inline-width    border-inline-style    border-inline-color;

CSS border-inline-color

CSS border-inline-color is a logical property that defines color for the start and end sides of a block. The selection of start and end sides depends upon the writing-mode. It is a shorthand property of border-block-start-color and border-block-end-color.

border-inline-color : border-inline-start-color    border-inline-end-color

CSS border-inline-end

CSS border-inline-end property defines width, style, and color for the end side border of a block. The selection of end side depends upon the writing-mode.

border-inline-end : border-inline-end-width    border-inline-end-style    border-inline-end-color

CSS border-inline-end-color

CSS border-inline-end-color is a logical property that defines color for the end side of a box. The selection of end side depends upon the writing-mode.

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);

Check the behavior of border-inline-end-color for different value of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-inline-end-color for different value of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-inline-end-color for different value of writing mode.

writing-mode: vertical-rl;

CSS border-inline-end-style

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

dashed

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

border-inline-end-style: dashed;

Check the behavior of border-inline-end-style for different value of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-inline-end-style for different value of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-inline-end-style for different value of writing mode.

writing-mode: vertical-rl;

CSS border-inline-end-width

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

+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;

Check the behavior of border-inline-end-color for different value of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-inline-end-color for different value of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-inline-end-color for different value of writing mode.

writing-mode: vertical-rl;

CSS border-inline-start

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

border-inline-start : border-inline-start-width    border-inline-start-style    border-inline-start-color

CSS border-inline-start-color

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

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);

Check the behavior of border-inline-start-color for different value of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-inline-start-color for different value of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-inline-start-color for different value of writing mode.

writing-mode: vertical-rl;

CSS border-inline-start-style

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

dashed

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

border-inline-start-style: dashed;

Check the behavior of border-inline-start-style for different values of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-inline-start-style for different values of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-inline-start-style for different values of writing mode.

writing-mode: vertical-rl;

CSS border-inline-start-width

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

+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;

Check the behavior of border-inline-start-color for different value of writing mode.

writing-mode: horizontal-tb;

Check the behavior of border-inline-start-color for different value of writing mode.

writing-mode: vertical-lr;

Check the behavior of border-inline-start-color for different value of writing mode.

writing-mode: vertical-rl;

CSS border-inline-style

CSS border-inline-style is a logical property that defines style for the start and end sides of a block. The selection of start and end sides depends upon the writing-mode. It is a shorthand property of border-inline-start-style and border-inline-end-style.

border-inline-style : border-inline-start-style    border-inline-end-style

CSS border-inline-width

CSS border-inline-width is a logical property that defines width for the start and end side oorders of a block. The selection of start and end sides depends upon the writing-mode. It is a shorthand property of border-inline-start-width and border-inline-end-width.

border-inline-width : border-inline-start-width    border-inline-end-width

CSS border-left

CSS border-left property defines the width, style, and color for the left side border of a box. It is a shorthand property of border-left-width, border-left-style, and border-left-color

border-left : border-left-width    border-left-style    border-left-color;

CSS border-left-color

CSS border-left-color property defines the color for the left side border of a box.

currentColorDefault

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

border-left-color: currentColor;

The color of text is green. Therefore the currentColor for the border is also green.

color-name

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

border-left-color: skyblue;

The color of text is green. Therefore the currentColor for the border is also green.

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);

The color of text is green. Therefore the currentColor for the border is also green.

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);

The color of text is green. Therefore the currentColor for the border is also green.

CSS border-left-style

CSS border-left-style property defines the color of left side border of a block.

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;

border-left-style property defines the color of left side border of a block

hidden

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

border-left-style: hidden;

border-left-style property defines the color of left side border of a block

dashed

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

border-left-style: dashed;

border-left-style property defines the color of left side border of a block

dotted

The left border consists of a series of round dots.

border-left-style: dotted;

border-left-style property defines the color of left side border of a block

solid

The left border consists of a solid line.

border-left-style: solid;

border-left-style property defines the color of left side border of a block

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;

border-left-style property defines the color of left side border of a block

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;

border-left-style property defines the color of left side border of a block

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;

border-left-style property defines the color of left side border of a block

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;

border-left-style property defines the color of left side border of a block

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;

border-left-style property defines the color of left side border of a block

CSS border-left-width

CSS border-left-width property defines the width for left side border of a block.

mediumDefault

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

border-left-width: medium;

If the border-left-style is none then the border-left-width is of no use i.e. represents 0px.

thin

thin value defines thin line border for the left side.

border-left-width: thin;

If the border-left-style is none then the border-left-width is of no use i.e. represents 0px.

thick

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

border-left-width: thick;

If the border-left-style is none then the border-left-width is of no use i.e. represents 0px.

+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;

If the border-left-style is none then the border-left-width is of no use i.e. represents 0px.

CSS border-radius

CSS border-radius property defines the length of both horizontal and vertical radii of bottom-right quarter of a box i.e. coverts sharp corners to rounded corners.

It is a shorthand property of border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

border-radius : border-top-left-radius    border-top-right-radius    border-bottom-right-radius    border-bottom-left-radius

CSS border-right

CSS border-right property defines the width, style, and color for the right side border of a box. It is%2