The border shorthand property is an efficient way to set the width, style, and color of an element's border all at once. This single line of code helps keep your CSS clean and readable.
Example
/* This is a CSS comment */
.shorthand-box {
/* A 2-pixel wide, solid, dark blue border */
border: 2px solid #00008B;
padding: 15px;
}
Explanation This code applies a border to an HTML element with the class shorthand-box. The border will be 2 pixels thick, a solid line, and dark blue in color.
Individual Border Properties
For more granular control, you can define border properties individually using border-width, border-style, and border-color. This is useful when you only want to change one aspect of the border.
Example
/* This is a CSS comment */
.individual-props-box {
/* Sets the thickness of the border */
border-width: 4px;
/* Sets the line style of the border */
border-style: dashed;
/* Sets the color of the border */
border-color: #FF4500; /* Orangered */
padding: 15px;
}
Explanation The code targets an element with the class individual-props-box. It creates a 4-pixel, dashed, orangered border by setting each property on its own line.
Border Style Variations
CSS provides a variety of border styles to choose from, such as dotted, double, groove, and ridge. These styles can dramatically change the look and feel of your elements.
Example
/* This is a CSS comment */
.style-variation-box {
/* Creates a 5-pixel wide, double-lined, gold border */
border: 5px double gold;
padding: 20px;
}
Explanation This example applies a double border style to the element. The result is a border with two solid lines, giving it a more formal or classic appearance.
Borders on Specific Sides
You don't have to apply borders to all four sides of an element. CSS allows you to target specific sides with border-top, border-right, border-bottom, and border-left.
Example
/* This is a CSS comment */
.single-side-border {
/* Applies a 3-pixel, solid, green border only to the left side */
border-left: 3px solid green;
padding-left: 10px;
}
Explanation This code adds a border exclusively to the left side of the element. This technique is often used for creating visual indicators, like in blockquotes or navigation menus.
Rounded Borders with border-radius
The border-radius property lets you soften the sharp corners of an element's border. You can apply a uniform radius to all corners or specify a different value for each.
Example
/* This is a CSS comment */
.rounded-corners-box {
border: 3px solid #8A2BE2; /* Blueviolet */
/* Rounds all four corners by 15 pixels */
border-radius: 15px;
padding: 20px;
}
Explanation In this code, border-radius: 15px; curves all four corners of the border. This creates a softer, more modern aesthetic for the element.
Different Styles on Each Side
For a more creative or complex design, you can set different border styles, widths, and colors for each side of an element within a single ruleset.
Example
/* This is a CSS comment */
.mixed-styles-box {
padding: 20px;
/* A dashed, orange top border */
border-top: 4px dashed orange;
/* A dotted, red bottom border */
border-bottom: 4px dotted red;
/* A solid, dark gray left and right border */
border-left: 6px solid #333;
border-right: 6px solid #333;
}
Explanation This example demonstrates how to combine different border properties on each side of the same element. It results in a unique and visually interesting container.
Border Image
The border-image property allows you to use an image as the border for an element. This advanced technique offers limitless creative possibilities for your designs.
Example
/* This is a CSS comment */
.image-border-box {
border: 20px solid transparent;
padding: 25px;
/* Specifies the image to use for the border */
border-image-source: url('https://developer.mozilla.org/en-US/docs/Web/CSS/border-image/border.png');
/* Defines how to slice the image */
border-image-slice: 30;
/* Defines how the image is repeated or stretched */
border-image-repeat: round;
}
Explanation This code uses an image to create the border. The border-image-slice property divides the image into nine sections, which are then applied to the corners and sides of the element.