CSS3 introduces some new and improved border properties for styling the borders of HTML elements, allowing for more visually attractive and flexible designs without relying heavily on images
border-radius
CSS3’s border-radius property enables the rounding of element corners. Before CSS3, achieving rounded corners required complex workarounds involving images.
Syntax:
element {
border-radius: value;
}The value can be a single radius that applies to all four corners or up to four values specifying the radius for the top-left, top-right, bottom-right, and bottom-left corners, respectively. You can also specify two values (top-left/bottom-right, top-right/bottom-left) or three values (top-left, top-right/bottom-left, or bottom-right).
border-radius allows you to create ellipse-based curves by providing two values for each corner, representing the horizontal and vertical radii.
Examples:
- Uniform Rounded Corners:
.rounded {
border: 1px solid black;
padding: 10px;
border-radius: 10px; /* All four corners rounded by 10px */
}- Different Corner Radii:
different-corners {
border: 1px solid black;
padding: 10px;
border-top-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;
}
This can also be written in shorthand:
.different-corners-shorthand {
border: 1px solid black;
padding: 10px;
border-radius: 20px 5px 15px 30px; /* top-left, top-right, bottom-right, bottom-left */
}- Ellipse-Based Corners:
.ellipse-corner {
border: 1px solid black;
padding: 10px;
border-top-left-radius: 50px 15px; /* Horizontal radius: 50px, Vertical radius: 15px */
}You can extend this to all corners:
.ellipse-corners {
border: 1px solid black;
padding: 10px;
border-top-left-radius: 50px 15px;
border-top-right-radius: 50px 15px;
border-bottom-right-radius: 15px 50px;
border-bottom-left-radius: 15px 50px;
}Browser support for border-radius is widespread in modern browsers, sometimes requiring vendor prefixes like -webkit- and -moz- for older versions. However, it’s sufficient to include the standard property for current browsers.
Individual border properties with radius: CSS3 provides properties like border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius to set the radius of each corner individually. These were used to achieve rounded corners before the shorthand border-radius was fully adopted and to create more complex rounded shapes.
box-shadow
The box-shadow property in CSS3 allows you to add drop shadows to elements. Similar to text-shadow, it provides a way to visually lift elements or create depth without using images.
Syntax:
element {
box-shadow: h-offset v-offset blur spread color inset;
}The values are as follows:
- h-offset: The horizontal offset of the shadow. Positive values move the shadow to the right, and negative values to the left.
- v-offset: The vertical offset of the shadow. Positive values move the shadow down, and negative values up.
- blur: The blur radius of the shadow. Higher values create a more blurred shadow, giving it a softer, slightly transparent edge. A value of 0 creates a sharp shadow. You can omit the blur value if it’s not needed.
- spread (optional): The spread radius of the shadow. Positive values expand the shadow in all directions, and negative values contract it.
- color: The color of the shadow.
- inset (optional): If this keyword is present, the shadow is drawn inside the element’s border.
You can also apply multiple shadows to an element by separating each shadow definition with a comma.
Examples:
- Basic Drop Shadow:
.drop-shadow {
border: 1px solid #ccc;
padding: 10px;
box-shadow: 5px 5px 5px #888888; /* 5px right, 5px down, 5px blur, gray color */
}- Shadow with Spread:
.spread-shadow {
border: 1px solid #ccc;
padding: 10px;
box-shadow: 2px 2px 2px 1px black; /* 2px right, 2px down, 2px blur, 1px spread, black color */
}- Inset Shadow:
.inset-shadow {
border: 1px solid #ccc;
padding: 10px;
box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5); /* Inset shadow, 3px right, 3px down, 5px blur, semi-transparent black */
}- Multiple Shadows:
.multiple-shadows {
border: 1px solid #ccc;
padding: 10px;
box-shadow: 2px 2px 5px blue, -2px -2px 5px red; /* Two shadows: one blue to the bottom right, one red to the top left */
}border-image
The border-image property in CSS3 allows you to use an image for the border of an element instead of a solid color or style. It basically takes a background image and slices it into nine pieces: four corners, four edges, and a middle section. The corner slices are placed in the element’s corners, while the side slices are repeated or stretched along the sides.
The border-image property is a shorthand for the following properties:
- border-image-source: Specifies the path to the image to be used.
- The border-image-slice function specifies the offsets that divide the image into nine distinct regions. It defines the inward offsets from the top, right, bottom, and left edges of the image. It can take one to four values, similar to margin, padding, and border-radius.
- border-image-repeat: Specifies how the images for the sides and the middle part of the border image are scaled or repeated. It can take one or two keywords: the first for the top and bottom, and the second for the left and right. Possible values include stretch (stretches the image), repeat (tiles the image), round (tiles with a whole number of tiles, resizing if necessary), and space (tiles with a whole number of tiles, adding space if needed).
- border-image-width (optional): Sets the width of the element’s border, overriding border-width. It uses the same syntax as border-image-slice.
- border-image-outset (optional): Specifies how far the border image can extend outside the element’s border box. It also uses the same syntax as border-image-slice.
Syntax (shorthand):
element {
border-image: source slice [ / width ]? [ / outset ]? repeat;
}Code Examples:
- Basic border-image:
.example {
border: 30px solid transparent; /* Make space for the image border */
border-image-source: url("border.png"); /* Assuming you have an image named 'border.png' */
border-image-slice: 30; /* Slice 30px from each edge */
border-image-repeat: round; /* Repeat the side edges */
}In this example, if border.png is a 90×90 pixel image, it will be split into nine 30×30 pixel regions. The edges will be repeated to form the border.
- Stretching the border image:
.example-stretch {
border: 30px solid transparent;
border-image: url("border.png") 30 stretch; /* Stretch the side edges */
}Here, the side parts of the image will be stretched to fit the border area.
- Using different repeat values:
.example-repeat {
border: 30px solid transparent;
border-image: url("border.png") 30 round stretch; /* Round horizontally, stretch vertically */
}Important Note: Elements with the border-image property will not respect the border-radius property. The specification states that a box’s backgrounds, but not its border-image, are clipped to the appropriate curve determined by background-clip.
border-color
The border-color property sets the color of the border of an HTML element. It can be used in conjunction with border-style and border-width to define the complete border.
You can set a single color for all four borders:
.book {
border-width: 1px;
border-style: solid;
border-color: #000;
}Alternatively, you can specify different colors for each border side by providing up to four color values. The order is typically top, right, bottom, left.
#rainbow {
border-style: solid;
border-width: 5px;
border-color: red green blue orange; /* Top is red, right is green, bottom is blue, left is orange */
}You can also use individual properties to set the color for each side:
#element {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
border-style: solid; /* You still need to define a border style */
border-width: 5px; /* And a border width */
}The border-color property accepts any valid CSS color value, including named colors, hexadecimal codes, RGB, and RGBA. RGBA allows you to specify the opacity of the border color.
.opaque-border {
border: 5px solid rgba(0, 0, 0, 0.5); /* Semi-transparent black border */
}Browser support for border-color is widespread. CSS3 allowed for multiple border-color values, and Firefox was noted to support this.
CSS3 Topics