Rounded Corner trong CSS

Rounded Corner trong CSS được sử dụng để thêm góc màu tới phần thân tài liệu hoặc phần văn bản bởi sử dụng thuộc tính border-radius. Cú pháp đơn giản của Rounded Corner như sau:

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}

Bảng dưới liệt kê một số giá trị mà Rounded Corner có thể nhận:

Giá trị	Miêu tả
border-radius	Sử dụng phần tử này để thiết lập 4 thuộc tính border radius
border-top-left-radius	Sử dụng phần tử này để thiết lập góc trái trên cùng của border
border-top-right-radius	Sử dụng phần tử này để thiết lập góc phải trên cùng của border
border-bottom-right-radius	Sử dụng phần tử này để thiết lập góc phải dưới cùng của border
border-bottom-left-radius	Sử dụng phần tử này để thiết lập góc trái dưới cùng của border

Quảng cáo

Ví dụ

Thuộc tính này có thể có ba giá trị. Ví dụ sau sử dụng cả hai giá trị:

<html>
   <head>
   
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(paper.gif);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
      
   </head>
   <body>
      <p id="rcorners1">Vi du Rounded Corner trong CSS!</p>
      <p id="rcorners2">Vi du Rounded Corner trong CSS!</p>
      <p id="rcorners3">Vi du Rounded Corner trong CSS!</p>
   </body>
</html>

Kết quả là:

Thiết lập thuộc tính cho mỗi góc trong CSS

Chúng ta có thể thiết lập thuộc tính cho mỗi góc như trong ví dụ sau:

<html>
   <head>
   
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
      
   </head>
   <body>
      <p id="rcorners1"></p>
      <p id="rcorners2"></p>
      <p id="rcorners3"></p>
   </body>
<body>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: