Ví dụ về thuộc tính border-radius

Thuộc tính border-top-left-radius 1 giá trị

Thuộc tính border-top-left-radius : Góc trên - bên trái sẽ được uốn cong.

HTML viết:

<html>
<head></head>
<body>
<p>border radius</p>
</body>
</html>

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -ms-border-top-left-radius: 10px;
    -o-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-top-left-radius 2 giá trị

Thuộc tính border-top-left-radius : Góc trên - bên trái sẽ được uốn cong.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-top-left-radius: 10px 20px;
    -webkit-border-top-left-radius: 10px 20px;
    -ms-border-top-left-radius: 10px 20px;
    -o-border-top-left-radius: 10px 20px;
    border-top-left-radius: 10px 20px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-top-right-radius 1 giá trị

Thuộc tính border-top-right-radius : Góc trên - bên phải sẽ được uốn cong.

HTML viết:

<html>
<head></head>
<body>
<p>border radius</p>
</body>
</html>

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -ms-border-top-right-radius: 10px;
    -o-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-top-right-radius 2 giá trị

Thuộc tính border-top-right-radius : Góc trên - bên phải sẽ được uốn cong.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-top-right-radius: 10px 20px;
    -webkit-border-top-right-radius: 10px 20px;
    -ms-border-top-right-radius: 10px 20px;
    -o-border-top-right-radius: 10px 20px;
    border-top-right-radius: 10px 20px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-bottom-left-radius 1 giá trị

Thuộc tính border-bottom-left-radius : Góc trên - bên trái sẽ được uốn cong.

HTML viết:

<html>
<head></head>
<body>
<p>border radius</p>
</body>
</html>

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -ms-border-bottom-left-radius: 10px;
    -o-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-bottom-left-radius 2 giá trị

Thuộc tính border-bottom-left-radius : Góc trên - bên trái sẽ được uốn cong.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-bottom-left-radius: 10px 20px;
    -webkit-border-bottom-left-radius: 10px 20px;
    -ms-border-bottom-left-radius: 10px 20px;
    -o-border-bottom-left-radius: 10px 20px;
    border-bottom-left-radius: 10px 20px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-bottom-right-radius 1 giá trị

Thuộc tính border-bottom-right-radius : Góc trên - bên phải sẽ được uốn cong.

HTML viết:

<html>
<head></head>
<body>
<p>border radius</p>
</body>
</html>

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -ms-border-bottom-right-radius: 10px;
    -o-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-bottom-right-radius 2 giá trị

Thuộc tính border-bottom-right-radius : Góc trên - bên phải sẽ được uốn cong.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-bottom-right-radius: 10px 20px;
    -webkit-border-bottom-right-radius: 10px 20px;
    -ms-border-bottom-right-radius: 10px 20px;
    -o-border-bottom-right-radius: 10px 20px;
    border-bottom-right-radius: 10px 20px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-radius 1 giá trị

Thuộc tính border-radius 1 giá trị: Cả 4 góc đều được uốn cong.

4 góc: [top-left] [top-right] [bottom-left] [bottom-right] đều có cùng giá trị.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-radius 2 giá trị

Thuộc tính border-radius 2 giá trị: Cả 4 góc đều được uốn cong.

2 góc: [top-left] [bottom-right] có cùng giá trị.
2 góc [top-right] [bottom-left] có cùng giá trị.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-radius: 20px 10px;
    -webkit-border-radius: 20px 10px;
    -ms-border-radius: 20px 10px;
    -o-border-radius: 20px 10px;
    border-radius: 20px 10px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-radius 3 giá trị

Thuộc tính border-radius 3 giá trị: Cả 4 góc đều được uốn cong.

Góc: [top-left] và [bottom-right] có giá trị riêng.
2 góc [top-right] [bottom-left] có cùng giá trị.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-radius: 20px 10px 30px;
    -webkit-border-radius: 20px 10px 30px;
    -ms-border-radius: 20px 10px 30px;
    -o-border-radius: 20px 10px 30px;
    border-radius: 20px 10px 30px;
}

Hiển thị trình duyệt khi có CSS:

border radius

Thuộc tính border-radius 4 giá trị

Thuộc tính border-radius 4 giá trị: Cả 4 góc đều được uốn cong.

Cả 4 góc: [top-left] [top-right] [bottom-left] [bottom-right] đều có giá trị khác nhau.

CSS viết:

p {
    height: 50px;
    border: 2px solid #cc0000;
    -moz-border-radius: 20px 10px 30px 40px;
    -webkit-border-radius: 20px 10px 30px 40px;
    -ms-border-radius: 20px 10px 30px 40px;
    -o-border-radius: 20px 10px 30px 40px;
    border-radius: 20px 10px 30px 40px;
}

Hiển thị trình duyệt khi có CSS:

border radius