CSS3 Border-radius Property Learning Example Tutorial

Last Update:2017-01-13 Source: Internet

Author: User

Tags object object xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Instance

To add a rounded border to a DIV element:
Div
{
BORDER:2PX solid;
border-radius:25px;
}

Browser support

ie9+, Firefox 4+, Chrome, Safari 5+, and opera support Border-radius properties.

Attribute definitions and usage instructions

The Border-radius property is a composite property that can specify up to four border-*-radius properties

Tip: This property allows you to add rounded corners to the element!
Default value: 0
Inheritance: No
Version: CSS3
JavaScript syntax: Object object.style.borderradius= "5px"

Grammar

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

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

Value Description
Length defines the shape of the bend.
% uses% to define corner shapes.

Example 1

Border-radius:2em;

is equivalent to:

Border-top-left-radius:2em;
Border-top-right-radius:2em;
Border-bottom-right-radius:2em;
Border-bottom-left-radius:2em;

Example 2

Border-radius:2em 1em 4em/0.5em 3em;

is equivalent to:

Border-top-left-radius:2em 0.5em;
Border-top-right-radius:1em 3em;
Border-bottom-right-radius:4em 0.5em;
Border-bottom-left-radius:1em 3em;

Tutorial on Border-radius attribute instances in CSS3

CSS box model has a lot of content and attributes, CSS has been updated and added attributes, today we say CSS3 new box model in the

The contents of the border, which is the Border-radius property.

The Border-radius property sets the border of the element to add rounded corners, but you can also add rounded corners without a border. But if it is shown, it must be increased

Add a background color or a border.

Possible values: Xpx rounded corners are xpx, with a radius of one-fourth circles of xpx.

The syntax format is:

BORDER-RADIUS:APX bpx CPX DPX; Clockwise. When A=b=c=d, written as: BORDER-RADIUS:APX;

This looks very abstract, or take an example to illustrate

Instance one: No border, a div with a background color, and an increase in the border fillet property

<! 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 "/>
&LT;TITLE&GT;CSS Demo </title>
<style type= "Text/css" >
#test {
width:300px;
height:200px;
Background-color: #FFFF00;
border-radius:10px;
line-height:200px;/* Set row height is the same, easy to center * *
Text-align:center;
}
</style>

<body>

<div id= "Test" > Siege class </div>

</body>

The results of the run are:

</body>

The results of the run are:

We will also see some circular pictures when browsing the Web page, this is also very good implementation, set the value of the Border-radius attribute to picture height

Half a degree and a width. It can be square, or it can be rectangular.

Example four: Set a picture as a circle

<! 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 "/>
&LT;TITLE&GT;CSS Demo </title>
<style type= "Text/css" >
IMG {
Display:block;
width:300px;
height:300px;
}
#img_1 {
border-radius:150px;
}
</style>

<body>

</body>

The results of the run are:

Of course, we can also make a single fillet setting, this is no longer too much demo, if we require different corners are different, you can use

The following properties are set:

Border-top-left-radius: Upper left corner

Border-top-right-radius: the upper right corner

Border-bottom-right-radius: Lower left corner

Border-bottom-left-radius: The lower right corner

Let's find a map to see the effect: You also want to set the width and color of each border different

Just give the CSS code:

. demo {
Border-color:red Green Blue Orange;
border-width:15px 30px 30px 80px;
border-radius:50px;
}

Effect Chart:

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More