Góc tròn chỉ trên một số góc trong css

Question

Có thể tạo góc tròn bằng css, nơi tôi chỉ làm tròn trên một số góc cụ thể thay vì tất cả các góc không? Hiện tại tôi đang sử dụng:

-webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    border-radius: 7px; 

Nhưng tôi không thấy cách nào để chỉ định góc trên cùng bên trái hoặc góc khác. Tôi muốn các góc khác vẫn vuông.

Answer 1

Bạn có thể làm điều đó như

border-radius: 5px 10px 15px 20px; /* This is a short hand syntax */ 

Cú pháp trên hoạt động giống như một fan hâm mộ, bắt đầu từ 5px và kết thúc vào 20px, chỉ cần thêm một sơ đồ dưới đây, mũi tên trong đó mô tả sự bắt đầu của dòng cú pháp tốc ký .

Demo

Để xác định một bán kính cụ thể, bạn có thể sử dụng tài sản như

border-top-left-radius: 10px; 

Đó là tương đương với

border-radius: 10px 0 0 0; 

Answer 2

Bạn có thể sử dụng: DEMO

• border-radius-top-left
• border-radius-top-right
• border-radius-bottom-left

• border-radius-dưới bên phải

  border-radius: 5px 0 10px 0; 
  

  

Để biết thêm thông tin, hãy truy cập this trang web.

Answer 3

Hãy thử sử dụng này: -

border-radius: <specific_value>px <specific_value>px <specific_value>px <specific_value>px 

những 4 giá trị đại diện cho các góc khác nhau một cách đồng hồ-khôn ngoan.

Answer 4

.rounded-corners { 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px;\ 
    border-radius: 20px; 
} 

Thay đổi có thể được thực hiện như thế này,

-webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -moz-border-radius-bottomright: 0px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 

Answer 5

của nó rất đơn giản để tạo ra một biên giới làm tròn bằng cách xác định một góc đặc biệt: -

Nếu u muốn tạo góc phía trên bên trái tròn và tất cả các góc khác thẳng, sau đó sử dụng mã này thay vì "bán kính đường viền" và cung cấp giá trị mong muốn của bạn bằng pixel

border-top-left-radius: 10px; 
-moz-border-top-left-radius: 10px; 
-webkit-border-top-left-radius: 10px; 

bạn có thể thực hiện điều này theo một cách khác biệt: -

bán kính biên giới: 10px 0px 0px 0px;

nơi đầu tiên ở góc trên bên trái (10px), thứ hai là góc trên cùng bên phải (0px), thứ ba là góc dưới cùng bên phải (0px) và thứ tư là góc dưới cùng bên trái (0px).

của thành viên này, chỉ góc trên bên trái sẽ được thực hiện tròn và tất cả các góc khác sẽ vẫn như cũ