How does CSS control the random fillet style of a picture? Example

This article mainly introduces how to use CSS to create a rounded border of the picture.

1, the CSS picture left into a rounded corner

code example:

<! DOCTYPE html>
Effects such as:


2, CSS Picture Center and CSS picture picture rounded border display

code example:

<! DOCTYPE html>
Effects such as:



The important attribute involved is border-radius, which can be used to realize the fillet of a picture.

The properties of the Border-radius are specific to each of the following:

Border-radius:2em, which indicates that 4 corners are rounded, and each fillet has a radius of 2em.

You can set two values, such as BORDER-RADIUS:2EM2EM, the 1th value represents the top left and bottom right corners, and the 2nd value represents the top right and bottom left rounded corners.

Set 3 values, such as Border-radius:2em 2em 2em, the 1th value represents the top left corner, the 2nd value represents the upper right and left lower rounded corners, and the 3rd value represents the lower right corner.

Set 4 values, such as Border-radius:2em 2em 2em2em;4 values for top left, top right, bottom right, bottom left, respectively.

You can also split 4 corners into 4 separate properties, such as upper left corner (Border-top-left-radius), upper right (Border-top-right-radius), Lower-Right (Border-bottom-right-radius) and lower-left rounded corners (Border-bottom-left-radius).

The above is about using CSS to turn the picture into a rounded style of introduction, there is a certain reference value. I hope to have some help in the need of friends.