Home >Web Front-end >CSS Tutorial >How to achieve rounded corners of images in css

How to achieve rounded corners of images in css

藏色散人Original: 2020-12-18 09:21:276792browse

How to implement rounded corners in images with css: First create an HTML sample file; then create a div element; and finally add rounded corners to the element through the "border-radius" attribute of css3.

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

CSS rounded corners

css2.1 Add a circle to an element Corners are a very troublesome thing. The old method is to use background images, which is more troublesome to produce. css3, the border-radius attribute enables the rounded corner attribute to be perfectly solved.

Syntax

border-radius: length value;

Description:

The length value can be px, percentage, em, etc.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

Set border-radius:10px; the four set corner radiuses are all 10px

How to achieve rounded corners of images in css

##There are four ways to write the border-radius attribute value (similar to margin and padding)

(1) border-radius: one value;

The result is as shown above

(2) border-radius: two values;

For example: border -radius:10px 20px; means the upper left corner and lower right corner are 10px, the upper right corner and lower left corner are 20px;

Result

How to achieve rounded corners of images in css

(3) border- radius: Set three values;

For example: border-radius:10px 20px 30px; means that the radius of the upper left corner, upper right corner, lower left corner, and lower left corner are 10px, 20px, and 30px in order

Result

How to achieve rounded corners of images in css

(4) border-radius: Set four values

For example: border-radius:10px 20px 30px 40px; means the upper left corner, The rounding radii of the upper right corner, lower right corner and lower left corner are 10px 20px 30px 40px

Result

How to achieve rounded corners of images in css

Achieve the following effect:

How to achieve rounded corners of images in css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        img{
            width: 300px;
            border-radius:80% 90% 100% 20%;
        }
    </style>
</head>
<body>
    <img  src="1.jpg" / alt="How to achieve rounded corners of images in css" >
    
</body>
</html>

The above is the detailed content of How to achieve rounded corners of images in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to change css hyperlink font colorNext article：How to change css hyperlink font color

See more

How to achieve rounded corners of images in css

Related articles