CSS3 border

May 04, 2021 03:00 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:

Here's an example: Fillet border, you can try to make one!

Add fillet elements to div:

border:2px solid;

Try it out . . .

CSS3 box shadow

The box-shadow property in CSS3 is used to add shadows:

Add the box-shadow property to div

box-shadow: 10px 10px 5px #888888;

Try it out . . .

CSS3 boundary picture

With the border-image property of CSS3, you can use images to create a border:

Border-image properties allow you to specify a picture as a border! To create the original image of the border above:

Create a border with a picture in div:

CSS3 border

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!