CSS3 border
May 04, 2021 CSS3
Table of contents
CSS3 border
With CSS3, you can create fillet borders, add shadow boxes, and act as boundaries instead of using design programs such as Photoshop drawing software, which greatly helps you save a lot of time.
In this section, you'll learn about the following border properties:
-
border-radius
-
box-shadow
-
border-image (note: this property does not support ie browsers)
Internet Explorer 9 plus supports border-radius and box-shadow properties.
Firefox, Chrome, and Safari support all new border properties.
Note: For border-image, Safari 5 and older versions require the prefix -webkit-.
Opera supports border-radius and box-shadow properties, but requires a prefix -o-for border-image.
CSS3 fillet
Adding fillets to CSS2 requires some skill, especially for nods, and we have to use different images in every corner.
But if you're in CSS3, it's easy to create fillets. In CSS3, the border-radius property is used to create fillets:
CSS3 box shadow
The box-shadow property in CSS3 is used to add shadows:
CSS3 boundary picture
With the border-image property of CSS3, you can use images to create a border:
Create a border with a picture in div:
Create a border with a picture in div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Try it out . . .
The new border property
| Property | Description | Css |
|---|---|---|
| border-image | Set shorthand properties for all border images. | 3 |
| border-radius | A shorthand property that sets all four border-radius properties | 3 |
| box-shadow | Attach the shadow of one or more pull-down boxes | 3 |
That's the whole story of this section, have you learned about CSS3 borders? If you're still confused, we recommend that you read it a few more times, or do it a few more times for the example above!