CSS TutorialLesson #25

Border Shorthand

Like you saw in the previous page, there are many properties to consider when dealing with borders.

CSS Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

Example

Example Code

css
Try it Yourself
p {

border: 5px solid red;
}

You can also specify all the individual border properties for just one side:

Left Border

Example Code

css
Try it Yourself
p {

border-left: 6px solid red;
}

Bottom Border

Example Code

css
Try it Yourself
p {

border-bottom: 6px solid red;
}


Interactive Code Examples

CSS Example 1

css
Try it Yourself
Interactive runnable CSS example from EA Academy.
Live Output Preview:

Left Border

css
Try it Yourself
Interactive runnable CSS example from EA Academy.
Live Output Preview:

Bottom Border

css
Try it Yourself
Interactive runnable CSS example from EA Academy.
Live Output Preview: