border-radius method to add rounded borders to elements
|
border-radius:10px; /* All corners are rounded with a radius of 10px*/
border-radius: 5px 4px 3px 2px; /* The four radius values are the upper left corner, upper right corner, lower right corner and lower left corner, clockwise*/
Don’t think that border-radius values can only be expressed in px units. You can also use percentages or ems, but the compatibility is not very good at the moment. Solid upper semicircle: Method: Set the height to half of the width, and only set the radius of the upper left and upper right corners to match the height of the element (it can be larger).
div{
height:50px;/*half of width*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*The radius should be at least the value of height*/
}
Filled circle: Method: Set the width and height values to be consistent (that is, a square), and set the four corner radius values to half of their values. The following code:
div{
height:100px;/*same as width setting*/
width:100px;
background:#9da;
border-radius:50px;/*The four corner radius values are all set to half of the width or height value*/
}Complete code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</www.dztcsd.com/title>
<style type="text/css">
div.circle{
height:100px;/*same as width setting*/
width:100px;
background:#9da;
border-radius:50px;/*The four corner radius values are all set to half of the width or height value*/
}
/*Task part*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:?;
}
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--Task section-->
<div class="semi-circle">
</div>
</body>
</html>This is the end of this article about the border-radius method of adding rounded borders to elements. For more related border-radius rounded border content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: A detailed introduction to the use of block comments in HTML
>>: Detailed explanation of webpage screenshot function in Vue
Recommend
Detailed explanation of the use of various MySQL indexes
1. Slow query log 1.1 MySQL log types Logs are us...
mysql5.7 remote access settings
Setting up remote access in mysql5.7 is not like ...
MySQL series multi-table join query 92 and 99 syntax examples detailed tutorial
Table of contents 1. Cartesian product phenomenon...
Mysql modify stored procedure related permissions issue
When using MySQL database, you often encounter su...
Implementation of the list-style-type attribute in front of CSS ordered or unordered lists
example: <html> <head> <style type...
In-depth explanation of Vue multi-select list component
A Multi-Select is a UI element that lists all opt...
JavaScript to achieve fancy carousel effect
This article shares two methods of implementing t...
Docker starts MySQL configuration implementation process
Table of contents Actual combat process Let's...
Small problem with the spacing between label and input in Google Browser
Code first, then text Copy code The code is as fol...
Example analysis of the search function of MySQL regular expressions (regexp and rlike)
This article uses examples to illustrate the sear...
Weather icon animation effect implemented by CSS3
Achieve results Implementation Code html <div ...
Nodejs implements intranet penetration service
Table of contents 1. Proxy in LAN 2. Intranet pen...
Design of image preview in content webpage
<br />I have written two articles before, &q...
Discussion on the Issues of Image Button Submission and Form Repeated Submission
In many cases, in order to beautify the form, the ...
How to use Axios asynchronous request API in Vue
Table of contents Setting up a basic HTTP request...