Web Front-end
CSS Tutorial
How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius
How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius
In CSS3, border-radius is used to achieve the effect of rounded corners. Its usage is introduced in detail below. Finally, an example is used to explain how to use border-radius to draw a circle.
The border-radius property is a shorthand property used to set the four border-*-radius properties.
Note: 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. Its value can be a length value or a hundred percent.
When four values are given, they are the upper left corner, the upper right corner, the lower right corner, and the lower left corner. That is, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
When three values are given, they represent the upper left corner, (upper right corner , lower left corner), lower right corner
When two values are given, it represents (upper left corner, lower right corner), (upper right corner, lower left corner) respectively
When one value is given, it represents the same effect in the four corners
Example 1: Give a value
div{width: 150px;height: 150px;border-radius: 15%;background: red;}Rendering:
Example 2: Give two values
div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}Rendering:
div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}
div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}
Example: Use border-radius to make a circle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
.a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
</style>
</head>
<body>
<div class="a1">
<div class="a2">HELLO</div>
</div>
</body>
</html>
The above is the detailed content of How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1665
14
1424
52
1322
25
1270
29
1249
24
Guide to modifying win11 window corners to rounded corners
Dec 31, 2023 pm 08:35 PM
After updating the win11 system, many friends found that the win11 interface window adopts a new rounded corner design. But some people don’t like this rounded corner design and want to modify it to the previous interface, but they don’t know how to modify it. Let’s take a look below. How to modify rounded corners in win11 1. The rounded corner design of win11 is a built-in system setting that cannot be modified at present. 2. So if you don’t like using the rounded corner design of win11, you can wait for Microsoft to provide a modification method. 3. If you are really not used to it, you can also choose to return to the previous win10 system. 4. If you don’t know how to roll back, you can check out the tutorials provided on this site. 5. If you cannot go back using the tutorial above, you can still
CSS shape property optimization tips: border-radius and clip-path
Oct 21, 2023 am 09:18 AM
CSS shape property optimization tips: border-radius and clip-path In CSS, we often use some properties to adjust the shape of elements to make them more attractive and visually appealing. Two commonly used properties are border-radius and clip-path. This article will introduce these two properties in detail, and provide some optimization tips, as well as specific code examples. 1. border-radius attribute border-radius attribute is used
How to adjust the rounded corners of win10 search box
Jan 15, 2024 pm 03:12 PM
There has been news about the rounded corners of the win10 search box for a long time, but it has never been implemented. We can generally use the registry to experience the rounded corners of the win10 search box. So let's take a look at the tutorial on the rounded corners of the win10 search box. Bar. Win10 search box variable rounded corners: 1. Open the search box, enter regedit, and enter the registry. 2. Find this path in Computer\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Search. 3. In the blank space, select New - DWORD (32-bit) value - Name the new key ImmersiveSearch - Number
Detailed explanation of CSS circular layout properties: border-radius and transform
Oct 21, 2023 am 11:46 AM
Detailed explanation of CSS circular layout properties: border-radius and transform 1. Introduction In web design, circular layout is often used to create circular elements, such as buttons, avatars, etc. The two key CSS properties for implementing a circular layout are border-radius and transform. This article will introduce in detail how to use the border-radius and transform properties to create a ring layout, and provide specific code examples. 2. border-ra
CSS Layout Tips: Best Practices for Achieving Rounded Card Effects
Oct 20, 2023 am 11:10 AM
CSS Layout Tips: Best Practices for Implementing Rounded Card Effects Introduction: With the continuous development of web design, rounded card effects have become one of the common elements in modern web design. By using CSS layout techniques, we can easily add beautiful rounded corner cards to web pages. This article will introduce the best practices for achieving rounded card effects and provide specific code examples for reference. 1. Use the border-radius property of CSS to create a rounded corner effect. In CSS, we can use border-r
How to solve the problem of no rounded corners and notifications in win11
Dec 31, 2023 pm 09:53 PM
After updating to win11, I found that the original notifications on the win10 system were missing, and there was no rounded corners function, which made many users feel uncomfortable with it. So today I brought you a solution to the problem of no rounded corners and no notifications in win11. Quick Let’s see how it works. What to do if there are no rounded corners or notifications in win11: 1. First enter the desktop of the win11 system. 2. Then click the "!" option in the lower right corner of the desktop. 3. A rounded corner notification will pop up at this time. 4. The fact that the calendar must pop up every time it is used has been complained by many users. However, since the win11 system is still in its early stages, it will definitely be improved in the future.
How to set the border to rounded corners in css
Sep 14, 2021 pm 04:21 PM
In CSS, you can use the border-radius attribute to set the border to rounded corners. You only need to add the "border-radius:radius value;" style to the border element to set the radii of four rounded corners at the same time. All corners are set to rounded corners.
What's the matter with the cad rounding that can't be done?
Feb 27, 2024 pm 12:10 PM
When using AutoCAD, sometimes you encounter problems when executing the fillet command (Fillet). Even if you follow the correct steps, the program still won't run properly. This may be caused by a variety of factors, such as the selected line segments not intersecting, the distance between the line segments is too short, the chamfer radius is too large, or a setting problem with the CAD software. So this tutorial guide will introduce the solution in detail, I hope it can help you. The reason why cad rounding cannot be done is mainly because the trim mode is set to not trim, just set the trim mode to trim. The specific introduction is as follows: 1. Open the CAD2023 software and create a rectangle. As shown below: 2. Click the fillet tool, as shown below: 3. Enter R space and click Radius (R). As shown below:
