How to use Border-radius in CSS

Source: Internet
Author: User
Today we are going to introduce Border-radius, how to use Border-radius, and the properties of Border-radius. Let's look at a small case.

DIVCSS3 fillet Word: Border-radius

Grammatical structure

P{BORDER-RADIUS:5PX}

Set Div Object box Four Corners 5 pixel fillet effect

p{border-radius:5px 0;}

Set the upper-left corner of the Div object box and the lower-right corner of the 5px fillet, and the other two corners are 0 rounded corners

p{border-radius:5px 5px 0 0;}

Set the upper-left corner of the Div object box and the upper-right corner of the 5px fillet, and the other two corners are 0 rounded corners

Description

border-radius:3px 4px 5px 6px

Represents the upper-left corner of the set object 3px fillet, upper right corner 4px rounded corner, lower right corner 5px rounded corner, lower left corner 6px rounded corner.

CSS3 Fillet case

Set rounded corners for two div boxes, and a picture to set fillet practice CSS3 rounded corners.

Case HTML code

<! DOCTYPE html> 

Case CSS Code:

. box {border-radius:5px 5px 0 0;border:1px solid #000; width:300px; height:80px; margin:0 auto}. Box2 img{border-radius:5p X}. box3{border-radius:5px 0;  Background: #999; width:300px; height:80px; margin:0 Auto}

Case description

1), the first box box to observe the fillet effect, set the border style, and set the fillet style border-radius:5px 5px 0 0; Set the upper-left corner and the upper-right corner rounded corners.

2), the second BOX3 box set the background color, set the fillet style border-radius:5px 0, set the upper-left corner and the lower-right corner rounded corners

3), the third pair of BOX2 box picture img Set the fillet style border-radius:5px, set Four corners are rounded corners.

About Border-radius knowledge so much, interested friends can do their own operation, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How to use Border-radius in CSS

HTML Editor Converter

How to enter a space character in HTML

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.