How to Use the CSS Border Shorthand Property
See CSS: Tips and Tricks for similar articles.Shorthand properties can take multiple values, allow you to write less code, and provide smaller files for the user to download. Find out how to use the CSS border
shorthand property in these steps.
- The shorthand for
border
is as follows:selector { border: border-width border-style border-color; }
- You can also apply the shorthand for
border
individually toborder-top
,border-right
,border-bottom
, andborder-left
. For example, the following syntax demonstrates the shorthand structure applied to aborder-top
property:
The CSS initial values for theselector { border-top: border-width border-style border-color; }
border
property are shown in the following table:Property Initial Value border-width
medium
border-style
none
border-color
inherited from a color
property - In addition to the
border
property, there are a few other shorthand properties, as indicated in the previous table. They areborder-color
,border-style
, andborder-width
. Their structure is different from theborder
property. The structure is actually similar tomargin
andpadding
properties in that you set the value for each side, as shown in the following syntaxselector { border-color: Top Right Bottom Left; border-style: Top Right Bottom Left; border-width: Top Right Bottom Left; }
- The following example demonstrates the use of the
border
shorthand property:
This code renders the following:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS Border Shorthand</title> <style type="text/css" media="screen"> div { margin: .75em; padding: .5em; } div.one { border: 1px solid blue; /* This sets the border value to a solid blue border with a width of 1px. */ } div.two { border-top: 1px solid blue; /* This sets a solid blue border with a width of 1px on the top . */ border-right: 2px solid blue; /* This sets a solid blue border with a width of 2px on the right. */ border-bottom: 3px solid blue; /* This sets a solid blue border with a width of 3px on the bottom. */ border-left: 4px solid blue; /* This sets a solid blue border with a width of 4px on the left. */ } div.three { border: solid; /* This border uses the initial values for color and width. */ } div.four { border: 1px #00f; /* No style is set for this border so it will not display. */ } </style> </head> <body> <div class="one">The border around this text will be solid blue with a width of 1px.</div> <div class="two">The border around this text is using shorthand for each individual side.</div> <div class="three">The border around this text will use the initial values for color and width.</div> <div class="four">No border will show as the border-style has not been set.</div> </body> </html>
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property (this article)
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3