Home > Article > Web Front-end > Implement rounded corners effect in css3

Implement rounded corners effect in css3

WBOYOriginal: 2022-08-11 17:16:263090browse

In css3, you can use the "border-radius" attribute to achieve the rounded corner effect. This attribute is used to set the outer border rounded corners of the element, and this attribute is an abbreviated attribute that can be used to set four separate The style of rounded corners, the syntax is "element object {border-radius: 1-4 length|% / 1-4 length|%;}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

Achieving rounded corners in css3

border-radius allows you to set the outer border of an element to be rounded. Determines a circle when using one radius and an ellipse when using two radii. The intersection of this (oval) circle and the border creates a rounded corner effect.

The border-radius attribute is a composite attribute that can specify up to four border-*-radius attributes

Syntax

border-radius: 1-4 length|% / 1-4 length|%;

Note: each The order of the four values of radius is: upper left corner, upper right corner, lower right corner, lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.

length defines the shape of the curve.
% Use % to define the shape of the corners.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

Output result:

Implement rounded corners effect in css3

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Implement rounded corners effect in css3. 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：Does vue belong to html5?Next article：Does vue belong to html5?

See more

Implement rounded corners effect in css3

Achieving rounded corners in css3

Related articles