How to use border

Source: Internet
Author: User
Tags implement

Border-radius to implement rounded div

The implementation of the fillet in the page is a very troublesome problem, although there are many ways to implement it, but it is more troublesome. In this article, let's look at how to use CSS3 Border-radius to implement rounded div.

Cross-browser compatibility

Not all browsers support CSS3, but those better browsers choose to be compatible rather than directly supported. We have two prefixes that we can use.

Prefix:-moz (for example,-moz-border-radius) for Firefox,-webkit (for example:-webkit-border-radius) for Safari and Chrome. ,

CSS3 rounded corners (all)

The ability to create rounded corners that are once very popular without using pictures is a time-consuming task, creating the perfect little rounded images that are used as appropriate CSS backgrounds. Now, with CSS3, we can create rounded corners with a few lines of code.

This is a 5px normal border and 15px border radius settings:

#roundCorderC {
font-family:arial;
border:5px solid #dedede;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:15px 25px;
Height:inherit;
width:590px;
}

Browser support: Firefox (3.05+ ...), Google Chrome (1.0.154+ ...), Google Chrome (2.0.156+ ...), Internet Explorer (IE7, IE8), Opera 9.6,safari ( 3.2.1+ windows)

CSS3 rounded corners (individual)

Of course, the four corners of a div do not need all rounded corners, you can individually achieve rounded corners.

#roundCornerI {
font-family:arial;
border:5px solid #dedede;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;
padding:15x 25px;
Height:inherit;
width:590px;
}

Browser support: Firefox (3.05+ ...), Google Chrome (1.0.154+ ...), Google Chrome (2.0.156+ ...), Internet Explorer (IE7, IE8), Opera 9.6,safari ( 3.2.1+ windows)



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.