CSS User Interface

Box Shadow

none

No shadow applied.

box-shadow: none;

h-offset / v-offset

Horizontal and vertical shadow offset.

box-shadow: 5px 10px;

blur

Shadow blur radius.

box-shadow: 20px 20px 10px grey;

spread

Shadow spread radius.

box-shadow: 20px 20px 50px 15px grey;

color

Shadow color.

box-shadow: 20px 20px 20px 10px red;

inset

Inner shadow instead of outer.

box-shadow: 20px 20px 50px 10px pink inset;

Radius

length

Defines corner shape.

border-radius: 100px;

%

Corner radius in percentage.

border-radius: 10%;

initial

Resets to default value.

border-radius: initial;

inherit

Inherits parent radius.

border-radius: inherit;

Colors

color

Text color.

color: red;

initial

Default color.

color: initial;

inherit

Inherits parent color.

color: inherit;

Fonts

font-style

Normal / italic / oblique.

font-style: normal;

font-variant

Small-caps, normal.

font-variant: normal;

font-weight

Boldness of text.

font-weight: bold;

font-size / line-height

Font size and spacing.

font-size: x-small;

font-family

Font type.

font-family: Georgia;

Lists

list-style

Sets all list properties.

list-style: none;

list-style-image

Image marker.

list-style-image: url('sqpurple.gif');

list-style-position

Inside or outside.

list-style-position: outside;

list-style-type

Marker type.

list-style-type: circle;

Background

background-color

Background color.

background-color: red;

background-image

Background image.

background-image: url('paper.gif');

background-position

Image position.

background-position: left top;

background-size

Image size.

background-size: auto;

background-repeat

Repeat behavior.

background-repeat: repeat;

background-origin

Positioning area.

background-origin: padding-box;

background-clip

Painting area.

background-clip: border-box;

background-attachment

Fixed or scroll.

background-attachment: fixed;