Home > Developer > Web Develop
Adius, is the meaning of the radius. With this property, you can easily make rounded corners, and of course, you can also make round effects. The principle is simple, "the radius of the square inscribed circle is equal to half the length of the square side." Let's do a red circle below.
Tools/MaterialsGrammar:
Border-radius:none | <length>{1,4} [/<length>{1,4}]?
Related properties: Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius, Border-top-left-radius
Value:
<length>:
The length value consisting of floating-point numbers and unit identifiers. cannot be negative.
Border-top-left-radius:
The length value consisting of floating-point numbers and unit identifiers. cannot be negative.
Description
The first value is a horizontal radius.
If the second value is omitted, it is equal to the first value, when the corner is a one-fourth fillet.
If any of the values is 0, the corner is a rectangle and will not be rounded.
Value is not allowed to be negative.
in adobe Dreamweave Software, write the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= Content-type "content=" text/html; charset=gb2312 "/>
<title> How to make a rounded corner of a block in HTML </title>
<style type=" text/css ";
. A {
border:1px solid #000;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
height:200px;
width:500px;
padding:20px;
}
</style>
<body>
<p class= "a";
How to make a rounded corner of the block in HTML
</p>
</body>
Style annotations
The styles for each corner are displayed separately:
border-top-left-radius:10px; top left border rounded 10 pixels
border-top-right-radius:10px; top right border fillet 10 pixels
border-bottom-left-radius:10px; left bottom border fillet 10 pixels
border-bottom-right-radius:10px; Right lower border fillet 10 pixels
All corners one style: border-radius:10px; all border fillets 10 pixels
How to make a rounded corner of a block's border in HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
