Jump to main content
Menu

Outlines, Border Styling, and Columns

Outlines

  • An outline is a box drawn around an element, rendering outside of the border.
  • What makes the outline unique is that it does not take up any height or width in the layout, so outlines for adjacent elements can overlap. This is different than the border property, which takes up space when rendered.
  • Think of outlines as being overlaid on top of the element.
  • Outlines are best used for temporary visual effects, such as :hover or :focus styling.
  • Thorough testing is recommended to ensure all target browsers are rendering as desired.
Property Usage and Effect Values Notes
outline-color Determines the color of the outline.
  • A pre-defined color name
  • hexadecimal value (e.g., #fff)
  • rgb value: rgb(255,0,0) or rgb(0%,50%,25%)
  • transparent
 Only one color can be specified and it applies to all four sides.
outline-style Determines the style of the outline.
  • dashed
  • dotted
  • double
  • groove
  • inset
  • none
  • outset
  • solid
 Only one style can be specified and it applies to all four sides.
outline-width Determines the width of the outline.
  • Number and sizing unit (e.g., px, em, rem, %)
  • thin
  • medium
  • thick
 Only one width can be specified and it applies to all four sides.
outline Combines the other outline-related properties into one sequence. outline-width outline-style outline-color Recommended because it is more efficient.
outline-offset Moves the outline so that it is away from the element's edges.
  • Number and sizing unit (e.g., px, em, rem, %)

outline Example

See the Pen Outline by Jason Withrow (@jwithrow) on CodePen.

outline-offset Example

See the Pen Outline Offset by Jason Withrow (@jwithrow) on CodePen.

Border Styling

  • The CSS Box Model has a variety of border-related properties, but as time passed more properties were added.
  • This section explores those additions.

border-radius Example

Property Usage and Effect Values Notes
border-image This shorthand allows images to be used for borders.
  • url() containing absolute or relative file path
 See the border-image specification for the individual properties rolled into this shorthand.
border-radius This shorthand allows borders to be rounded.
  • Number and unit (e.g., px, em, %)
 For a specific corner:
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
box-shadow Applies a shadow to the edges of an element.
  • Four space-separated values are supplied.
  • The first value is a number reflecting the horizontal offset (positive values put the shadow on the right side of the box; negative values on the left side).
  • The second value is a number reflecting the vertical offset (positive values put the shadow below the box; negative values put it above).
  • The third value is a number reflecting the blur radius (0 gives a sharp shadow and higher values blur the shadow more).
  • The fourth value is the color of the shadow.
 Be careful not to trigger horizontal scrollbars on elements that fill their parent and have shadows applied. The shadows take up space and will then exceed the available width.

border-radius Example

See the Pen Border Radius by Jason Withrow (@jwithrow) on CodePen.

box-shadow Example

See the Pen Box Shadow by Jason Withrow (@jwithrow) on CodePen.

Multiple Columns

  • These properties allow web page content to be easily laid out in columns, similar to a newspaper.
  • Columns can either be set up by widths or by count.
  • This can be a good choice if you have an ordered or unordered list and you want the list items to flow across multiple columns; you would style the parent element of the list items accordingly.
  • Note that sometimes there can be rendering anomalies cross-browser as elements wrap to new columns and may end up split apart across the columns; the key is careful testing and then trouble-shooting.
Property Usage and Effect Values Notes
column-count Specifies the number of columns.
  • Number (representing number of columns)
column-width Specifies the width of each column.
  • Number and unit (e.g., px, em, %)
Each column is the same width.

If a height is specified that determines the number of columns, based on the content.

If font size increases then more columns are added; the height should not be exceeded.
column-gap Specifies the gap (gutter) between each column.
  • Number and unit (e.g., px, em, %)
Each column has the same space between it.
column-rule Shorthand for styling vertical rules (lines) between the columns. Space-separated sequence of values:
  • border-width value
  • border-color value
  • border-style value
 The shorthand combines these properties:
  • column-rule-color
  • column-rule-style
  • column-rule-width
columns Shorthand for setting column-width and column-count.
  • Same values as the column-width and column-count properties (e.g., columns: 200px 4).

Column Properties Examples

See the Pen Columns by Jason Withrow (@jwithrow) on CodePen.