CSS3 fillet


May 04, 2021 03:00 CSS3


Table of contents


CSS3 fillet

The interface using the CSS3 border-radius property shows the following image:


CSS3 fillet

With the CSS3 border-radius property, you can make fillets for any element.

Try using the CSS3 Fillet Maker to make your first css3 fillet!


Browser support

The numbers in the table support the version number of the first browser for this property.

-webkit- or -moz - the previous number supports the first version of the prefix.

属性
border-radius 9.0 5.0
4.0 -webkit-
4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

CSS3 border-radius property

With the CSS3 border-radius property, you can make fillets for any element.

Here are three examples:

1. Element fillets that specify the background color:

Fillets!

2. Specify the element fillet of the border:

Fillets!

3. Specify the element fillet of the background picture:

Fillets!

The code is as follows:

#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(/statics/images/course/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

Try it out . . .

CSS3 border-radius - specify each fillet

If you specify only one value in the border-radius property, four fillets are generated.

However, if you want to specify one of the four corners, you can use the following rules:

  • Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.

  • Three values: the first is in the upper-left corner, the second is in the upper-right and lower-left corners, and the third is in the lower-right corner

  • Two values: the first is the upper-left and lower-right corners, and the second is the upper-right and lower-left corners

  • One value: The four fillet values are the same

Here are three examples:

1. Four values - border-radius: 15px 50px 30px 5px:

2. Three values - border-radius: 15px 50px 30px:

3. Two values - border-radius: 15px 50px:

Here's the source code:

#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

Try it out . . .

You can also create elliptical corners:

#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

Try it out . . .

CSS3 fillet properties

Property Describe
border-radius An abbreviation for all four corner border-radius properties
border-top-left-radius The arc in the upper left corner is defined
border-top-right-radius The arc in the upper right corner is defined
border-bottom-right-radius The arc in the lower right corner is defined
border-bottom-left-radius Defines the arc in the lower left corner

With the above 5 fillet properties, I hope you can make the most satisfactory fillet.


CSS3 fillet generator

Online CSS3 fillet generator

CSS3 fillet