Home arrow Style Sheets arrow Page 7 - CSS Shorthand at a Glance

CSS Shorthand at a Glance

What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 32
February 08, 2005
  1. · CSS Shorthand at a Glance
  2. · Basic CSS rules
  3. · Font shorthand property
  4. · Background shorthand property
  5. · Margin shorthand property
  6. · Padding shorthand property
  7. · Border shorthand property
  8. · List-style shorthand property

print this article

CSS Shorthand at a Glance - Border shorthand property
(Page 7 of 8 )

The syntax for this shorthand property is the following:

border: border-width | border-style | border-color;

Border-width refers to the width of the border surrounding the selected element, while "border-style" specifies the style applied to that border. Possible values for this property include: "double," "groove," "inset," "ridge," "solid," "dashed," "dotted," and "none."  Finally, the "border-color" property sets the color for the border of the element.

In order to understand these properties, two examples are listed below:

p {

     border: 1px solid blue;


p {

     border: dotted blue;


The first case will display a solid blue line of 1px for each border of a <p> element. The second example will show a dotted blue line for all the borders of the <p> element.

Still with me? Excellent. Let’s focus on another useful CSS shorthand property: individual borders.

Border-top, border-right, border-bottom and border-left shorthand property

The syntax for this shorthand property is:

border-top: border-width | border-style | color;

border-right: border-width | border-style | color;

border-bottom: border-width | border-style | color;

border-left: border-width | border-style | color;

These properties work identically to those defined for "border." However, the "border" property itself is not capable of discerning between the four sides of an element. These are specifically aimed to let you set a style to a specific border.

Take a look at the following examples:

p {

     border-top: 1px solid red;


p {

     border-right: solid blue;


p {

     border-bottom: 1px dotted red;


p {

     border-left: 2px solid #ffc;


The first case will display a solid red line of 1px for the "border-top" of the <p> element.

The second case will show a solid blue line for the "border-right" of the element.

The third and fourth examples will display a <p> element with a red dotted line of 1px for the "border-bottom," and a 2px yellow solid line for the "border-left" of the paragraph, respectively.

For the next section, we’ll see another handy shorthand property: list-style.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials