Back to CSS Notes
Topic #25

Border Shorthand

The border shorthand sets width, style and colour in one declaration. It is the everyday way borders are written in real code.


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

p {

border: 5px solid red;
}

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

Left Border

p {

border-left: 6px solid red;
}

Bottom Border

p {

border-bottom: 6px solid red;
}

Want to go beyond the notes?

Join Coding Now Tech Institute's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

Border Shorthand – FAQs

Quick answers about learning Border Shorthand in CSS.

This free note from Coding Now Tech Institute explains Border Shorthand in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on Coding Now Tech Institute, including Border Shorthand, is 100% free with no signup required.
With focused practice, most students grasp Border Shorthand in 1–3 days from these notes; pairing it with Coding Now Tech Institute's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the Coding Now Tech Institute Community (/community) — expert instructors answer within 24 hours.
Call NowEnroll Now