CSS3 introduces two new properties to style element borders in a more sophisticated manner: the border-image property for adding images to borders, and the border-radius property for creating rounded corners without relying on images.
In the following section, we'll delve into these new border properties of CSS3. For other border-related properties, please refer to the CSS border tutorial.
The border-radius property enables the creation of rounded corners. This property defines the shape of the corners of the outer border edge. Before CSS3, designers used sliced images to achieve rounded corners, which was cumbersome.
.box {
width: 300px;
height: 150px;
background: #ffb6c1;
border: 2px solid #f08080;
border-radius: 20px;
}The border-image property allows you to specify an image to serve as an element's border.
The border's design is derived from the sides and corners of the image defined in the border-image source URL. The border image can be sliced, repeated, scaled, and stretched in various ways to fit the border image area's size.
.box {
width: 300px;
height: 150px;
border: 15px solid transparent;
-webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
-o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
border-image: url("border.png") 30 30 round;
}Tip: The round option is a variation of the repeat option that evenly distributes the image tiles to ensure smooth connections at the ends.