Borders, outlines, shadows

framing

These properties set the style, color, thickness, shadows, corner radius and more, for borders and outlines.

Properties for borders:

border
border-color
border-width
border-style
border-top
border-right
border-bottom
border-left
border-radius

Properties for custom borders from an image file:

border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

Properties for outlines:

outline
outline-color
outline-style
outline-width
outline-offset

Other box properties:

box-shadow
box-decoration-break

border

Border: style + color + width

Set the style, color and width for all four borders.

css, style, framing, border

border-color

Border line color

Set the color used to draw the element's border line.

css, style, framing, border-color

border-width

Border thickness

Set the thickness of an element's border.

css, style, framing, border-width

border-style

Border: solid, dashed, dotted

Set the type of pen used to draw an element's border.

css, style, framing, border-style

border-top

Border top: style + color + width

Set the top border's style, color and width.

css, style, framing, border-top

border-right

Border right: style + color + width

Set the right-side border's style, color and width.

css, style, framing, border-right

border-bottom

Border bottom: style + color + width

Set the bottom border's style, color and width.

css, style, framing, border-bottom

border-left

Border left: style + color + width

Set the left-side border's style, color and width

css, style, framing, border-left

border-radius

Round corners

Adjust the roundness of the element's corners.

css, style, framing, border-radius

border-image

All-in-one custom border spec

This property sets all of these properties in a single declaration: border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat.

css, style, framing, border-image

border-image-source

Custom border image template

Specify the location of the image to be used as the template for a custom border.

css, style, framing, border-image-source

border-image-slice

Define the custom border regions

Cut the source image for custom borders into nine pieces: four corners, four edges, and one fill area.

css, style, framing, border-image-slice

border-image-width

Custom border thickness

Specify how to scale the source image regions into the custom border's thickness.

css, style, framing, border-image-width

border-image-outset

Custom image offset distance

Specify the distance to offset the custom image from the normal border area, similar to the "outline" property.

css, style, framing, border-image-outset

border-image-repeat

Custom border corner-to-corner rule

Specify how the borders of a custom image are stretched or repeated to extend from corner to corner.

css, style, framing, border-image-repeat

outline

Outline: style + color + width

Set the outline-style, outline-color and outline-width of an element's outline ("outside-the-box" border).

css, style, framing, outline

outline-color

Outline color

Set the color used to draw the element's outline ("outside-the-box" border).

css, style, framing, outline-color

outline-style

Outline: solid, dashed, dotted

Set the type of pen used to draw an element's outline ("outside-the-box" border).

css, style, framing, outline-style

outline-width

Outline thickness

Set the thickness of an element's outline ("outside-the-box" border).

css, style, framing, outline-width

outline-offset

Distance from border to outline

Specify the distance from the element's outline ("outside-the-box") border to its normal border.

css, style, framing, outline-offset

box-shadow

Box lighting effect

Cast a drop shadow across the element's box using a light source from a specified direction and distance.

css, style, framing, box-shadow

box-decoration-break

The split element issue

Specify how to render an element's border, margin, padding, and shadow when it is split at a page break, or when an inline element spans more than one line.

css, style, framing, box-decoration-break