2012-04-09 23 views
46

Trong trang web của tôi, tôi cần phải thực hiện một div có góc tròn chỉ ở các góc trên cùng. Nhưng tôi không biết làm thế nào để làm điều này. Ai đó có thể giúp tôi?Làm cách nào để làm cho các góc được làm tròn chỉ trên phần trên cùng của đường viền trong css?

+3

gì bạn đã thử khi cố gắng để thiết lập [ ' border-radius'] (http://www.w3.org/TR/css3-background/#the-border-radius)? – Sampson

+5

Thật khó hiểu về những gì cấu thành một câu hỏi thực sự. Nếu đây không phải là một câu hỏi thực thì cái gì? –

+2

Ngay cả trong lần sửa đổi đầu tiên của câu hỏi này cũng đủ dễ dàng để xem những gì đã được hỏi. Tôi đồng ý, điều này không nên bị đóng. – thomasrutter

Trả lời

105

câu trả lời Brendan là đúng, nhưng để có được nó để render trong các trình duyệt khác, bạn nên sử dụng này:

-moz-border-radius: 0px; 
-webkit-border-radius: 3px 3px 0px 0px; 
border-radius: 3px 3px 0px 0px; 
+15

border-radius đã được chuẩn hóa khá nhiều rồi. Nó sẽ hoạt động trong tất cả các trình duyệt mới mà không có tiền tố của nhà cung cấp. –

+2

Tuy nhiên, bạn không thể cho rằng mọi người đang sử dụng các trình duyệt mới. Tốt hơn để trang trải cơ sở của bạn. – NotJay

+3

Đồng ý - nhưng bạn cũng có thể thả '-moz-' ngay bây giờ - nó đủ dài – marksyzm

30
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 
+1

cảm ơn sự giúp đỡ ... – ali

+1

Lưu ý: câu trả lời được chấp nhận sẽ đặt các góc tròn ở trên cùng nhưng cũng sẽ thay đổi các góc dưới cùng thành hình vuông. – dfmiller

20

Những câu trả lời khác là chính xác nhưng có là giải pháp tốc ký:

border-radius: 3px 3px 0 0; 

mà sẽ tròn chỉ các góc trên cùng và để lại những người dưới mình. Thứ tự của các giá trị là theo chiều kim đồng hồ - trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái.

Dưới đây là một ví dụ: http://jsfiddle.net/9sXWf/

+0

Tôi chắc rằng bạn biết cách định dạng mã của mình đúng cách, cũng như hy vọng cung cấp một ví dụ hoàn chỉnh? –

+0

Umm .. okay, chắc chắn. Thêm ví dụ và câu trả lời được định dạng lại. – Swader

Các vấn đề liên quan