CSS Rule Quick Reference

• The value could be a specific font family name, eg., "Times New Roman", Arial; or a generic font family name. There are five generic font names: serif, sans-serif, cursive, fantasy, and monospaced;
• Multiple font family names can be separated with commas, to indicate their priorities from high to low;
• Quotes are necessary to enclose whitespaces in the font family name;

font-family: "Times New Roman"

• Absolute font size name: xx-small, x-small, small, medium, large, x-large, xx-large
• Relative font size name: larger, smaller
• Absolute font size value. Units could be in, cm, mm, pt, pc, px
• Relative font size value. Units could be em (1em equals the current font size), and ex (1ex is the x-height of a font, usually half the font size)
• A percentage value

font-size: 24pt;

• normal, italic, or oblique
• The difference between italic font style and oblique font style is that the former is created by type designer, while the latter is created by the system to skew normal font

font-style: italic;

• normal or small-caps

font-variant: small-caps;

• Absolute font weight name: normal, bold
• Relative font weight name: bolder, lighter
• Absolute font weight number: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900

font-weight: bold;

• General syntax of value: [ font-style | font-variant | font-weight ]? font-size[/line-height]? font-famlily
• System fonts: caption, icon, menu, message-box, small-caption, status-bar

font: bold italic small-caps 24px "New Century Schoolbook", serif;

• Predefined color name, eg., red, yellow, cyan, etc.
• rgb(r, g, b) construct. Three integers in range of 0 to 255 are used to specify red, green, and blue color components, eg., rgb(255, 0, 0)
• rgb(r%, g%, b%) construct. Three integers in range of 0 to 100 are used to specify the percentage of red, green, and blue color components, eg., rgb(100%, 0%, 0%). You cannot omit % symbols.
• Hexadecimal notation of RGB color, eg., #FF0000 (it can be shortened to #F00)
• rgba(r, g, b, a) construct. The first three integers in range of 0 to 255 are used to specify red, green, and blue color components. The last floating-point number in range of 0.0 to 1.0 specifies transparancy, eg., rgba(255, 0, 0, 0.5)
• rgb(r%, g%, b%, a) construct. Three first three integers in range of 0 to 100 are used to specify the percentage of red, green, and blue color components. The last floating-point number in range of 0.0 to 1.0 is transparancy, eg., rgba(100%, 0%, 0%, 0.5)
• hsl(h, s, l) construct. h in range of 0 to 360 specifies a color in a color wheel with a degree value, eg., 0 for red, 120 for green, and 240 for blue. s in range of 0% to 100% specifies saturation. 0% saturation is a shade of gray, 100% is full saturation. l in range of 0% to 100% specifies lightness. 0% is black, 50% is normal, and 100% is white, eg., hsl(240, 100%, 50%). You cannot omit % symbols.
• hsla(h, s, l, a) construct. It is similar to hsl(h, s, l) construct, with a as a floating-point number in range of 0.0 to 1.0 that specifies transparancy.

This paragraph shows the effect of color: rgba(100%, 0%, 0%, 0.5), which is light red.

• none
• x y r color: x defines horizontal offset, y defines vertical offset, r is a blur radius (the level of blurriness), and color is the color of the shadow. Both x and y can be negative values.
• See box-shadow below.

This paragraph shows the effect of text-shadow: 5px 5px 3px rgba(0,0,0, 0.3).

• A length value
• A percentage value;

This paragraph shows the effect of text-indent: 2em. More text are necessary in this paragraph.

• left, right, center, justify

This paragraph shows the effect of text-align: center. More text are necessary in this paragraph.

• baseline, middle, sub, super, text-top, text-bottom, top, bottom
• A length value, which can a negative value.
• A percentage value, which is multiplied with the line-height property. It can be a negative value.

This paragraph shows the effect of vertical-align: 10px relative to some text.

• none, underline, overline, line-through

This paragraph shows the effect of text-decoration: overline.

• none, capitalize, uppercase, lowercase

This paragraph shows the effect of text-transform: uppercase.

• normal: let web browser ajust spacing to justify text
• Length value: extra spacing between characters, in addition to default spacing. It could a negative value.

This paragraph shows the effect of letter-spacing: 5px.

• normal: normal word space, as defined by the font
• Length value: extra spacing between words, in addition to default spacing. It could a negative value.

This paragraph shows the effect of word-spacing: 5px.

• normal: the web browser collapses multiple white spaces into one, and breaks lines if necessary to fill line boxes;
• pre: to keep all the white spaces and to break lines only at newline characters
• nowrap: to collapse white spaces and avoid breaking lines
• pre-wrap: to keep all the white spaces, and to break lines if necessary or at newline characters
• pre-line: to collapse white spaces, and to break lines if necessary or at newline characters

This paragraph shows the effect of white-space: pre-line. This sentence contains 5 spaces. This sentence contains a newline.

• ltr, rtl

This paragraph shows the effect of direction: rtl.

• The same value as color property

This paragraph shows the effect of background-color: #FFC.

• none
• url(filename)
• A gradient, with details below

This paragraph shows the effect of background-image: url(bkimg.png).

• repeat-x, repeat-y
• one or two repeating pattern values along horizontal and vertical directions. The values are: repeat, space, round, no-repeat

This paragraph shows the effect of background-image: url(bkimg.png); background-repeat: repeat-x.

• top, right, bottom, left, center, or combination of horizontal and vertical alignment
• Two percentage values: x% y%. This aligns (x%, y%) of the image with (x% y%) of the element's padding box.
• Two length values: x y. It aligns the top left corner of the image with (x, y) of the element's padding box.

This paragraph shows the effect of background-image: url(bkimg.png); background-position: top right.

• scroll, fixed

This paragraph shows the effect of background-image: url(bkimg.png); background-attachment: fixed. I need more text to show this effect. So I will put more words, phrases, sentences. In addition to background image setting, I also specified the height of this paragraph to be 50px. The overflow property is set to auto to show the vertical scroll bar.

• border-box (default setting), padding-box, content-box

This paragraph shows the effect of background-image: url(bkimg.png); background-clip: content-box. In addition to background image setting, I also show border box and specify the padding to be 5px.

• contain: scale the background image to the largest size to fit both its width and height inside the element
• cover: scale the background image to the smallest size to fit either its width or height inside the element
• One or two length values for absolute width and height. If there is one value, it is for the width, and the height will be scaled proportionally.
• One or two percentage values relative to background positioning area
• The combination of a length value, a percentage value, and auto

This paragraph shows the effect of background-image: url(bkimg.png); background-size: cover.

• General syntax of value: [ background-image background-position background-size background-repeat background-attachment background-size background-color ]

• content-box: the width and height properties apply to the content area of the element's box. The default value;
• border-box: the width and height properties apply to the border box of the element;

• auto
• A length value
• A percentage value
• It is not applied to inline elements, table rows, or row groups

This paragraph shows the effect of width: 40px.

• auto
• A length value
• A percentage value
• It is not applied to inline elements, table rows, or row groups

• A length value
• A percentage value

This paragraph shows the effect of padding-top: 50px. The borderline is also displayed to show the effect.

• A length value or a percentage value
• If there is only one value, it is applied to all the four padding areas.
• If there are two values, the first is applied to top and bottom padding areas, the second applied to right and left paddings.
• If there are three values, the first is applied to top padding area, the second applied to right and left paddings, the third applied to bottom padding.
• If there are four values, they are applied to top, right, bottom, and left padding, respectively.

This paragraph shows the effect of padding: 1em 2em. The borderline is also displayed to show the effect.

• A length value
• A percentage value
• It could be a negative value.

This paragraph shows the effect of margin-top: 50px. The borderline is also displayed to show the effect.

• A length value or a percentage value
• If there is only one value, it is applied to all the four margin areas.
• If there are two values, the first is applied to top and bottom margin areas, the second applied to right and left margins.
• If there are three values, the first is applied to top margin area, the second applied to right and left margins, the third applied to bottom margin.
• If there are four values, they are applied to top, right, bottom, and left margin, respectively.

This paragraph shows the effect of margin: 1em 2em. The borderline is also displayed to show the effect.

• Width name: thin, medium, thick;
• A length value

This paragraph shows the effect of border-bottom-width: 2px. The style of the border line also needs to be set.

• 1 to 4 width values

This paragraph shows the effect of border-width: 4px 2px. The style of the border line also needs to be set.

• A color value

This paragraph shows the effect of border-bottom-color: blue. The style of the border line also needs to be set.

• 1 to 4 color values

This paragraph shows the effect of border-color: blue yellow. The style of the border line also needs to be set.

• none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

This paragraph shows the effect of border-bottom-style: dotted.

• 1 to 4 style values

This paragraph shows the effect of border-style: solid dashed dotted.

• General syntax: [ border-wdith ] border-style [ border-color ]

This paragraph shows the effect of border: 2px solid blue.

• One or two length values for absolute radius size. The first value is for horizontal radiuis, the second value for vertical radius. If there is only one value, it is used for both radii.
• One or two percentage values for relative radius size

This paragraph shows the effect of border-top-left-radius: 20px 15px. The style of the border line also needs to be set.

• General syntax: a [ b c d [ / e f g h ] ]
• If there are one to four values, and there is no slash, these values set both horizontal and vertical radii of top-left, top-right, bottom-right, and bottom-left corners.
• If there is a slash between values, the values before the slash set horizontal radius of top-left, top-right, bottom-right, and bottom-left corners, and the values after the slash set vertical radius of four corners.

This paragraph shows the effect of border-radius: 20px 10px / 20px 10px. The style of the border line also needs to be set.

• The image file contains 3 × 3 grid, which corresponds to 4 corners, 4 sides, and the middle part (not used).
• value: url(imageFile), none

• One to four numbers (absolute size. Number of pixels for a bitmap image, or vector coordinates for a vector image), which specifies the offset of gridlines from top, right, bottom, and left of the image;
• One to four percentage values (relative to image size);
• Mixture of absolute and relative values.

This pargraph shows the effect of border-width: 30px; border-image-source: url(bdimg.png); border-image-slice: 30.

• One to four length values (absolute size), which specifies the offset of gridlines from top, right, bottom, and left of border image area;
• One to four percentage values (relative to border image area);
• one to four numbers (multiples of border width as relative size);
• Mixture of absolute and relative values.

This pargraph shows the effect of border-width: 30px; border-image-source: url(bdimg.png); border-image-slice: 30; border-image-width: 15px.

• One to four length values (absolute size), which applied to top, right, bottom, and left borders;
• One to four numbers (multiples of border width as relative outset size);
• Mixture of absolute and relative values.

This pargraph shows the effect of border-width: 15px; border-image-source: url(bdimg.png); border-image-slice: 30; border-image-width: 30px; border-image-outset: 2.

• One to two values: stretch, repeat, round, space

This pargraph shows the effect of border-width: 15px; border-image-source: url(bdimg.png); border-image-slice: 30; border-image-repeat: space stretch.

• General syntax: border-image-source border-image-slice [ border-image-width border-image-outset ] border-image-repeat

This paragraph shows the effect of border-width: 15px; border-image: url(bdimg.png) 30 repeat stretch.

• General syntax: [ inset ] xoffset yoffset radius spread color
• xoffset and yoffset specifies horizontal and vertical offset of the shadow. The could be negative values;
• radius is blur radius
• spread specifies the distance for the shadow shape to expand (positive spread) or contract (negative spread);
• color specifies the color of the shadow.

This paragraph shows the effect of border: 2px solid black; box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.3).

• disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, amenian, georgian, lower-alpha, upper-alpha, none

• Apple
• Banana
• Peach

• url(fileName)
• none

• Apple
• Banana
• Peach

• inside, outside

• Apple
• Banana
• Peach

• Generaly syntax: list-style-type list-style-position list-style-image

• Apple
• Banana
• Peach

• fixed: use fixed table layout algorithm, which is based on the width of the table, columns, and border or cell spacing. It is faster than auto;
• auto: use any automatic layout algorithm, which may be based on the size of contents in all the cells.

• separate: each cell has its own borders;
• collapse: cells share borders. border-spacing property does not work.

• One or two length values for horizontal and vertical spacing between cells' borders.

• show, hidden;

• top, bottom;

• left (the box is floating to the left), right (the box is floating to the right), none

This paragraph shows the effect of float: left.

This is the paragraph that is not floating, but with the margin-left: 220px.

• left (no previous floating box on the left), right (no previous floating box on the right), both (no previous floating box on both sides), none

This paragraph shows the effect of float: left.

This paragraph shows the effect of float: right. If I put more sentences here, it can grow to the right of the third paragraph.

This paragraph shows the effect of clear: left.

• static: default position according to the normal flow, which is determined by the Web browser. top, right, bottom, and left properties don't work;
• relative: the position is set relative to its default position. The values in top, right, bottom, and left contain relative offset values;
• absolute: the box is taken out of normal flow, and placed relative to the box's containing block;
• fixed: Similar to absolute, but the position is fixed in the viewport, and the box doesn't scroll.

This paragraph shows the effect of position: relative; left: 50px.

• A length value;
• A percentage value: relative to the size of containing block.

This paragraph shows the effect of position: relative; left: 50px.

• An integer;

This paragraph goes before the image. However, the z-index of the image is -1.

• rect(top, right, bottom, left). top, right, bottom, left are length values, which define the offset from top, right, bottom, and left border edge of the box.

• visible (default value), hidden, scroll, auto

This paragraph shows the effect of overflow: hidden when the size of the box is small.

• visible (default value)
• hidden: fully transparent, but the box still affects layout

This is a hidden paragraph.

This paragraph shows the effect of visibility: hidden in the previous paragraph.

• block, inline-block, inline, list-item, none

• Apple
• Banana
• Peach

• A floating-point number in range of 0.0 to 1.0

This paragraph shows the effect of opacity: 0.5.

• A positive integer;
• Firefox browser uses -moz-column-* properties, while Chrome and Safari use -webkit-column-* properties;

This paragraph shows the table cell's effect of column-count: 2; -moz-column-count: 2; -webkit-column-count: 2.

• A positive length value;

This paragraph shows the table cell's effect of column-width: 100px; -moz-column-width: 100px; -webkit-column-width: 100px.

• General syntax: column-width column-count;

• A positive length value;

This paragraph shows the table cell's effect of column-count: 2; column-gap: 2em; -moz-column-count: 2; -moz-column-gap: 2em; -webkit-column-count: 2; -webkit-column-gap: 2em.

• A color value;

• A border style value;
• none.

• A positive length value;

• General syntax: column-rule-width column-rule-style [ column-rule-color ];

This paragraph shows the table cell's effect of column-count: 2; column-rule: 2px blue dashed; -moz-column-count: 2; -moz-column-rule: 2px blue dashed; -webkit-column-count: 2; -webkit-column-rule: 2px blue dashed.

• break-before/break-after value: auto, always, avoid, left, right, page, column, avoid-page, avoid-column;
• break-inside value: auto, avoid, avoid-page, avoid-column;

• string, url(imageFile), counter(counterVar)
• none

• counterVar [ number ]

• counterVar [ number ]

• General syntax: linear-gradient( [ direction, ] colorStop1 [, colorStop2, ... ] )
• direction specifies the direction of the gradient line. It can be specified in degree, eg., 45deg. 0deg points upward, and positive angles present clockwise rotation. direction can also be keyword "to" followed by a side or a corner, eg., "to right". If direction is omitted, it defaults to "to bottom".
• colorStop sets color along the gradient line. It contains a color value, and a relative or absolute length of the stop at the gradient line. Length value can be omitted.
• For firefox Web browser, the syntax is -moz-linear-gradient( ... ).

This paragraph shows the effect of background: linear-gradient(45deg, rgba(255, 255, 0, 0.3) 10%, rgba(0, 0, 255, 0.3) 90%). I also outlined the border of the paragraph and set the height to be 100px.

• General syntax: radial-gradient( [ endingShape ] [ size ] [ at position ] colorStop1 [, colorStop2, ... ] )
• endingShape specifies the ending shape of radial gradient. It can be "circle" or "ellipse". If it is omitted, it will be determined by the number of values for size;
• size defines the size of the ending shape. If the ending shape is a circle, one length value is necessary to define its radius. If it is an ellipse, two length values or two percentage values are needed for horizontal and vertical radii. It can also be one of the keywords: "closest-side", "farthest-side", "closest-corner", and "farthest-corner". If it is omitted, it defaults to "farthest-corner".
• position defines the center of the circle or ellipse. Two length values or percentage values are needed. If omitted, it defaults to center.
• colorStop is the same as linear gradient.
• For firefox Web browser, the syntax is -moz-radial-gradient( ... ).

This paragraph shows the effect of background: radial-gradient(circle farthest-side, rgba(255, 255, 0, 0.3) 10%, rgba(0, 0, 255, 0.3) 90%). I also outlined the border of the paragraph and set the height to be 100px.

• The same as linear gradient, but colors stops are repeated infinitely in both direction.

This paragraph shows the effect of background: repeating-linear-gradient(45deg, rgba(255, 255, 0, 0.3) 0px, rgba(0, 0, 255, 0.3) 50px, rgba(255, 255, 0, 0.3) 100px). I also outlined the border of the paragraph and set the height to be 100px.

• The same as radial gradient, but colors stops are repeated infinitely outward.

This paragraph shows the effect of background: repeating-radial-gradient(circle 50px, rgba(255, 255, 0, 0.3) 0%, rgba(0, 0, 255, 0.3) 50%, rgba(255, 255, 0, 0.3) 100%)). I also outlined the border of the paragraph and set the height to be 100px.

• none, all
• One or more CSS property names. The properties that can be animated are: background-color, background-position, border's width, border's color, border-spacing, position property, clip, color, font-size, font-weight, height/width, margin setting, opacity, outline-color, outline-width, padding setting, text-indent, text-shadow, word-spacing, z-index

• A time value. If it is omitted, it defaults to "0s", which means there is no anmiation.

transition-duration: 5s;

• A time value. If it is omitted, it defaults to "0s", which means transition starts immediately.

transition-delay: 2s;

• Predefined timing function name: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end;
• Stepping function: step(integer, [ start | end ] ). integer defines how many intervals into which the input domain [0, 1.0] is divided. During each interval, the output is constant and euqally divides the output range [0, 1.0]. "start" or "end" specifies whether the change in output happens at the start or end of the interval.
• A cubic Bezier function: cubic-bezier(x1, y1, x2, y2). x1, y1, x2, and y2 are in the range of [0.1, 1.0]. They are coordinates of control points for the curve from (0, 0) to (1,1).

transition-timing-function: ease;

• General syntax: transition-property transition-duration transition-timing-function transition-delay

If you move the cursor over or out of this paragraph, the border will appear and disappear. The style for this paragraph is #transitionP { border: 0px solid blue; transition-property: border; transition-duration: 5s; transition-delay: 2s; transition-timing-function: ease; } #transitionP:hover { border: 50px solid blue; }

• A list of animation names defined with @keyframes rule;

@keyframe backgroundChange {

from { background-color: lightBlue; }

to { background-color: lightcyan; }

}

animation-name: backgroundChange;

• A positive time value;

• The same value as transition-timing-function property;

• A positive integer or infinite. The default value is 1;

• normal, reverse, alternate, alternate-reverse;

• running, paused;

• A non-negative time value. It defaults to 0s;

• none;
• backwards: the CSS rule of the first frame of animation is applied during animation-delay time period;
• forwards: the CSS rule of the last frame of animation is applied after animation finishes;
• both;

• General syntax: animation-name animation-duration [ animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state ]

The background color of this paragraph constantly changes from lightBlue to lightCyan in 5 seconds and then vice versa. The animation backgroundchange is defined as @keyframes backgroundchange { from { background-color: lightBlue; } to { background-color: lightCyan; } }. The style of the paragraph is animation: backgroundchange 5s ease infinite alternate; -webkit-animation: backgroundchange 5s ease infinite alternate.

• A list of transform functions (see below);

The picture below shows the effect of transform: translate(20px, 20px); -webkit-transform: translate(20px, 20px). The bottom margin of this paragragh is 50px.

• General syntax: x y z;
• x and y can be combination of location names: left, center, right, top, bottom, one or two length values or percentage values. Default value is 50% 50%. If there is only one value, y defaults to center;
• z is a length value. It defaults to 0px.

The picture below shows the effect of transform-origin: 0px 0px; -webkit-transform-origin: 0px 0px; transform: rotate(15deg); -webkit-transform: rotate(15deg)The bottom margin of this paragragh is 50px.

• none;
• A positive length value, which sets the distance from which the element is viewed;

• General syntax: x y;
• x and y can be combination of location names: left, center, right, top, bottom, one or two length values or percentage values. Default value is 50% 50%. If there is only one value, y defaults to center;

The style of this table cell is perspective: 100px; -webkit-perspective: 100px; perspective-origin: 0% 100%; -webkit-perspective-origin: 0% 100%. The picture below shows the effect of perspective: 100px; -webkit-perspective: 100px; transform: rotateX(30deg); -webkit-transform: rotateX(30deg);. The bottom margin of this paragragh is 50px.

The picture belows shows the effect of transform: rotateY(180deg); -webkit-transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden. So it is invisible.

• Syntax: translate(xOffset, yOffset);
• xOffset and yOffset can be either a length value, or a percentage value;
• If yOffset is omitted, it defaults to 0;

The picture below shows the effect of transform: translate(20px, 20px); -webkit-transform: translate(20px, 20px). The bottom margin of this paragragh is 50px.

• Syntax: translateX(offset) or translateY(offset);
• offset can be either a length value, or a percentage value;

The picture below shows the effect of transform: translateX(50px); -webkit-transform: translateX(50px). The bottom margin of this paragragh is 50px.

• Syntax: scale(xScale, yScale);
• xScale and yScale are numbers;
• If yScale is omitted, it is the same as xScale;

The second picture below shows the effect of transform: scale(1.5); -webkit-transform: scale(1.5). The bottom margin of this paragragh is 50px.

• Syntax: scaleX(scale) or scaleY(scale);
• scaleis a number. Another scale factor is always 1;

The second picture below shows the effect of transform: scaleX(1.5); -webkit-transform: scaleX(1.5). The bottom margin of this paragragh is 50px.

• Syntax: rotate(angle);
• If angle is postivie, the element rotates clockwise;

The second picture below shows the effect of transform: rotate(30deg); -webkit-transform: rotate(30deg). The bottom margin of this paragragh is 50px.

• Syntax: skew(xAngle, yAngle);
• If yAngle is omitted, it defaults to 0;

The second picture below shows the effect of transform: skew(30deg, 15deg); -webkit-transform: skew(30deg, 15deg). The bottom margin of this paragragh is 50px.

• Syntax: skewX(angle) or skewY(angle);

The second picture below shows the effect of transform: skewY(15deg); -webkit-transform: skewY(15deg). The bottom margin of this paragragh is 50px.

• Syntax: matrix(a, b, c, d, e , f);
• It is equivalent to a 2D matrix:

• Syntax: translate3d(xOffset, yOffset, zOffset);

The style of the table cell is perspective: 100px; -webkit-perspective: 100px; perspective-origin: 0% 100%; -webkit-perspective-origin: 0% 100%.The second picture below shows the effect of transform: translate3d(20px, 20px, 20px); -webkit-transform: translate3d(20px, 20px, 20px).

• Syntax: translateZ(zOffset);

The style of the table cell is perspective: 100px; -webkit-perspective: 100px.The second picture below shows the effect of transform: translateZ(20px); -webkit-transform: translateZ(20px).

• Syntax: scale3d(xScale, yScale, zScale);

• Syntax: scaleZ(zScale);

• Syntax: rotate3d(x, y, z, angle);
• x, y, and z specifies a direction vector;

The style of the table cell is perspective: 100px; -webkit-perspective: 100px; perspective-origin: 0% 100%; -webkit-perspective-origin: 0% 100%.The second picture below shows the effect of transform: rotate3d(1, 1, 1, 30deg); -webkit-transform: rotate3d(1, 1, 1, 30deg).

• Syntax: rotateX(angle) or rotateY(angle) or rotateZ(angle);

The second picture below shows the effect of transform: rotateX(45deg); -webkit-transform: rotateX(45deg).

• Syntax: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
• These 16 values specifiy a matrix in column-major order;

• auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zomm-in, zoom-out;

The paragraph shows the effect of cursor: crosshair.

• none, both, horizontal, vertical;
• It is applied to the elements whose overflow property is not visible.

The paragraph shows the effect of width: 100px; height: 40px; overflow: hidden; resize: both.

• clip, ellipsis;
• It is applied to the elements whose overflow property is not visible.

The paragraph shows the effect of width: 100px; height: 40px; overflow: hidden; text-overflow: ellipsis.

• A length value

• A border style value;

• A color value;

• General syntax: outline-color outline-style outline-width;

The outline of this text box below is outline: blue dotted 1px.