Membuat sudut bundar menggunakan CSS [ditutup]


253

Bagaimana saya bisa membuat sudut bulat menggunakan CSS?


Berikut adalah video yang bagus tentang cara membuat sudut membulat menggunakan hanya CSS: < sampsonvideos.com/video.php?video=12 >
Stan

Artikel tentang teknik sudut bulat dari jaringan Pengembang Yahoo - dari tahun 2007. Dan cara untuk menambahkan sudut bulat (membutuhkan gambar) ke panel YUI l.
Simon_Weaver

3
200+ suka mengatakan ini konstruktif.
SteveCav

1
Saya percaya ini adalah pertanyaan kanonik yang berharga yang pantas dibuka kembali, terutama karena sekarang komunitas wiki.
DavidRR

Kecuali bahwa itu adalah informasi yang sepele dapat ditemukan banyak, banyak tempat lain di web. Tidak perlu bagi SO untuk menggandakan sumber daya yang ada.
Jim Garrison

Jawaban:


102

Sejak CSS3 diperkenalkan, cara terbaik untuk menambahkan sudut bulat menggunakan CSS adalah dengan menggunakan border-radiusproperti. Anda dapat membaca spesifikasi di properti, atau mendapatkan beberapa informasi implementasi yang berguna di MDN :

Jika Anda menggunakan browser yang tidak mengimplementasikan border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), maka tautan di bawah ini merinci berbagai pendekatan yang berbeda. Temukan yang sesuai dengan situs Anda dan gaya pengkodean, dan ikutilah.

  1. Desain CSS: Membuat Sudut & Batas Kustom
  2. CSS Rounded Corners 'Roundup'
  3. 25 Teknik Sudut Bulat dengan CSS

1
saya menemukan DD_roundies menjadi solusi prefek: dillerdesign.com/experiment/DD_roundies/#nogo
vsync

1
@vsync tetapi tidak didukung dengan baik di IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers
Jitendra Vyas

5
tautan yang berguna jika Anda memutuskan untuk menggunakan CSS3 (seperti SO) border-radius.com ( referensi lain css3.info/border-radius-apple-vs-mozilla )
mickthompson


80

Saya melihat ini pada awal penciptaan Stack Overflow dan tidak bisa menemukan apa pun metode menciptakan sudut bulat yang tidak meninggalkan saya merasa seperti aku hanya berjalan melalui saluran pembuangan.

CSS3 tidak akhirnya menentukan para

border-radius:

Itulah tepatnya yang Anda inginkan agar berfungsi. Meskipun ini berfungsi baik di versi terbaru Safari dan Firefox, tetapi tidak sama sekali di IE7 (dan saya tidak berpikir di IE8) atau Opera.

Sementara itu, peretasan menurun. Saya tertarik mendengar apa yang dipikirkan orang lain sebagai cara terbersih untuk melakukan ini di IE7, FF2 / 3, Safari3, dan Opera 9.5 saat ini ..


5
"... berjalan melalui selokan?" Itu agak kasar, Jeff. Jawabannya adalah, tergantung." Kotak warna, gradien, atau drop-shadow tunggal? Apakah mereka perlu melakukan ekspansi secara vertikal, horizontal, atau keduanya? Solusi berbeda untuk kebutuhan berbeda. Semakin bagus kebutuhan, semakin banyak solusi saluran pembuangan.
Carl Camera

28
Saya lebih suka menggunakan metode ini. Jika browser tidak mendukungnya, siapa yang peduli?
Sam Murray-Sutton

11
Twitter menurunkan fitur sudut bulat ke sudut runcing di situs web mereka menjadi pengguna IE. Bukan masalah besar kok.
Lance Fisher

5
Saya pasti akan menggunakan pendekatan ini - mari kita tangani apa adanya. Jika seseorang tidak menggunakan browser (yaitu IE), mereka layak untuk melihat sudut bulat sebagai sudut. :)
thSoft

1
Saya ingin memilih jawaban ini, karena tidak menjelaskan apa yang menurut penjawab (Jeff) adalah cara terbaik.
allyourcode

27

Saya biasanya mendapatkan sudut membulat hanya dengan css, jika browser tidak mendukung mereka melihat konten dengan sudut datar. Jika sudut bulat tidak terlalu penting untuk situs Anda, Anda dapat menggunakan garis-garis di bawah ini.

Jika Anda ingin menggunakan semua sudut dengan jari-jari yang sama ini cara mudah:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

tetapi jika Anda ingin mengontrol setiap sudut ini bagus:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Seperti yang Anda lihat di setiap set Anda memiliki gaya khusus browser dan pada baris keempat kami menyatakan dengan cara standar dengan ini kami menganggap jika di masa depan yang lain (semoga IE juga) memutuskan untuk mengimplementasikan fitur agar gaya kami siap untuk mereka juga.

Seperti yang diceritakan dalam jawaban lain, ini berfungsi dengan baik di Firefox, Safari, Camino, Chrome.



13

Saya akan merekomendasikan menggunakan gambar latar belakang. Cara lain tidak hampir sama baiknya: Tidak ada markup anti-aliasing dan tidak masuk akal. Ini bukan tempat untuk menggunakan JavaScript.


1
javascript pasti memiliki cakupan kegagalan tertinggi, dan berkedip dalam pengalaman saya. semua plugin jquery saya sudah mencoba memiliki beberapa jenis efek samping yang tak terduga
Simon_Weaver

CurvyCorners ( curvycorners.net ) dan ShadedBorder ( ruzee.com/blog/shadedborder ) jangan berhasil mendukung anti-aliasing. Ada juga cara menggunakan sans markup tambahan ini, Anda dapat menerapkan dengan kelas dan kemudian markup ditambahkan secara dinamis ke elemen yang dikelompokkan. Yang mengatakan, semakin saya menggunakannya semakin Anda tampaknya benar ... mereka berguna untuk membuat prototipe tetapi menambahkan banyak bobot ekstra ke DOM. Sekarang milik saya disesuaikan dengan keinginan saya, saya berencana untuk mengubahnya menjadi gambar.
Ben Regenspan,

1
Jawaban ini hampir tidak mengandung detail yang cukup bagi seseorang untuk mengimplementasikan apa yang dipikirkan si penjawab.
allyourcode

11

Seperti kata Brajeshwar: Menggunakan border-radiuspemilih CSS3. Sekarang, Anda dapat menerapkan -moz-border-radiusdan -webkit-border-radiusuntuk masing-masing browser berbasis Mozilla dan Webkit.

Jadi, apa yang terjadi dengan Internet Explorer? Microsoft memiliki banyak perilaku untuk membuat Internet Explorer memiliki beberapa fitur tambahan dan mendapatkan lebih banyak keterampilan.

Di sini: .htcfile perilaku yang didapat round-cornersdari border-radiusnilai di CSS Anda. Sebagai contoh.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Tentu saja, pemilih perilaku bukan pemilih yang valid, tetapi Anda dapat meletakkannya di file css yang berbeda dengan komentar bersyarat (hanya untuk IE).

The perilaku HTC File


4
tidak pernah mengerti mengapa begitu banyak yang peduli dengan validasi CSS. tidak masalah apa pun, hanya masalah validasi DOM.
vsync

Ini sepertinya cara untuk pergi.
Matthew Olenik

3
Bisakah Anda menambahkan penjelasan singkat tentang apa itu file perilaku? Saya pikir orang yang mencari jawaban untuk pertanyaan ini mungkin tidak akan terbiasa dengan itu.
allyourcode

2
Tampaknya tautan file perilaku sudah mati
evanmcd

9

Dengan dukungan untuk CSS3 yang diterapkan di versi Firefox, Safari dan Chrome yang lebih baru, juga akan membantu untuk melihat "Border Radius".

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

Seperti steno CSS lainnya, di atas juga dapat ditulis dalam format yang diperluas, dan dengan demikian mencapai Radius Perbatasan yang berbeda untuk topleft, topright, dll.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

1
Sintaks Anda untuk -webkit-border-bottom-rightright-radius: 3px; dan -webkit-border-top-rightright-radius: 10px; harus membaca -webkit-border-bottom-right-radius: 3px dan -webkit-border-top-kanan-radius: 10px;
Wolfr

8

jQuery adalah cara saya menangani hal ini secara pribadi. dukungan css minimal, gambar terlalu fiddly, untuk dapat memilih elemen yang ingin Anda miliki di sudut bulat di jQuery masuk akal bagi saya meskipun beberapa tidak diragukan lagi akan membantah sebaliknya. Ada plugin yang baru-baru ini saya gunakan untuk proyek yang sedang bekerja di sini: http://plugins.jquery.com/project/jquery-roundcorners-canvas


@mcaulay - Apakah itu juga mendukung memberi bayangan pada kotak?
nickytonline

roundcorners jquery tidak mendukung IE 8.
evanmcd

6

Selalu ada cara JavaScript (lihat jawaban lain) tetapi karena ini murni gaya, saya agak menentang penggunaan skrip klien untuk mencapai ini.

Cara yang saya sukai (meskipun memiliki batasnya), adalah dengan menggunakan 4 gambar sudut bulat yang akan Anda posisikan di 4 sudut kotak Anda menggunakan CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Seperti disebutkan, ia memiliki batasnya (latar belakang di belakang kotak bulat harus polos jika sudut tidak cocok dengan latar belakang), tetapi ia bekerja dengan sangat baik untuk hal lain.


Diperbarui: Memperbaiki implikasi dengan menggunakan sprite sheet.


Itu semua dapat disederhanakan menggunakan sprite CSS, mungkin saya akan memperbarui jawaban saya.
mbillard

Di sana, saya memperbarui kode untuk menggunakan sprite sheet.
mbillard


5

Di Safari, Chrome, Firefox> 2, IE> 8 dan Konquerer (dan mungkin orang lain) Anda dapat melakukannya di CSS dengan menggunakan border-radius properti. Karena belum secara resmi menjadi bagian dari spesifikasi, silakan gunakan awalan khusus vendor ...

Contoh

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Solusi JavaScript umumnya menambahkan tumpukan kecil div untuk membuatnya terlihat bulat, atau mereka menggunakan batas dan margin negatif untuk membuat sudut berlekuk 1px. Beberapa juga dapat menggunakan SVG di IE.

IMO, cara CSS lebih baik, karena mudah, dan akan menurun dengan anggun di browser yang tidak mendukungnya. Ini, tentu saja, hanya kasus di mana klien tidak menegakkan mereka di browser yang tidak didukung seperti IE <9.


5

Inilah solusi HTML / js / css yang saya lakukan baru-baru ini. Ada kesalahan pembulatan 1px dengan pemosisian absolut di IE sehingga Anda ingin wadahnya berukuran genap dengan lebar piksel, tetapi cukup bersih.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Gambar hanya selebar 18px dan memiliki 4 sudut yang dikemas bersama. Tampak seperti lingkaran.

Catatan: Anda tidak memerlukan pembungkus dalam kedua, tapi saya suka menggunakan margin pada pembungkus dalam agar margin pada paragraf dan heading tetap mempertahankan runtuhnya margin. Anda juga dapat melewati jquery dan cukup meletakkan bungkus bagian dalam di html.


3

Sebagai indikasi betapa rumitnya untuk membuat sudut membulat bekerja, bahkan Yahoo tidak menganjurkannya (lihat poin berbutir pertama)! Memang, mereka hanya berbicara tentang sudut bulat 1 pixel dalam artikel itu tetapi menarik untuk melihat bahwa bahkan sebuah perusahaan dengan keahlian mereka telah menyimpulkan bahwa mereka terlalu banyak kesusahan untuk membuat mereka bekerja sebagian besar waktu.

Jika desain Anda dapat bertahan tanpa mereka, itu solusi termudah.


Saya ingin menemukan bagian dari halaman YUI yang sedang Anda bicarakan, tetapi tidak ada poin yang saya lihat mengatakan bahwa mencoba untuk mendapatkan sudut bulat adalah ide yang buruk. Bisakah Anda lebih spesifik? Saya menemukan satu bagian yang membahas pembicaraan tentang bagaimana Anda harus mengatur lebar Anda secara berbeda saat menggunakan sudut bundar, tetapi tidak mengecilkannya.
allyourcode

@allyourcode - saya tidak melihatnya lagi. saya ingat membuat posting ini tetapi tidak persis apa yang mereka katakan. Namun sepertinya di tautan kedua di atas mereka menyebutkan menghapus dukungan IE untuk sudut bulat 1px. tetapi dalam tulisan apa pun postingan ini sedikit menjengkelkan karena mereka hanya berbicara tentang sudut 1px yang menurut saya buang-buang waktu! Saya ingat pada saat saya menulis ini karena frustrasi secara umum dengan sudut-sudut membulat, dan memilih gambar sudut
Simon_Weaver

2

Tentu, jika lebar tetap, sangat mudah menggunakan CSS, dan sama sekali tidak menyinggung atau melelahkan. Saat Anda membutuhkannya untuk menskala di kedua arah, segalanya berubah menjadi berombak. Beberapa solusi memiliki jumlah div yang mengejutkan yang bertumpuk satu sama lain untuk mewujudkannya.

Solusi saya adalah mendiktekan perancang bahwa jika mereka ingin menggunakan sudut bulat (untuk saat ini), itu harus lebar tetap. Desainer suka sudut bulat (begitu juga saya), jadi saya menemukan ini sebagai kompromi yang masuk akal.


2

Perbatasan Ruzee adalah satu-satunya solusi rounded corner anti-alias berbasis Javascript yang saya temukan yang berfungsi di semua browser utama (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), dan JUGA satu-satunya yang bekerja saat baik elemen bulat DAN elemen induk berisi gambar latar belakang. Itu juga berbatasan, bayangan, dan bercahaya.

RUZEE.ShadedBorder yang lebih baru adalah pilihan lain, tetapi tidak memiliki dukungan untuk mendapatkan informasi gaya dari CSS.


1

Jika Anda ingin menggunakan solusi radius batas, ada situs web yang luar biasa ini untuk menghasilkan css yang akan membuatnya berfungsi untuk safari / chrome / FF.

Bagaimanapun, saya pikir desain Anda tidak harus bergantung pada sudut bulat, dan jika Anda melihat Twitter, mereka hanya mengatakan F **** kepada pengguna IE dan opera. Sudut-sudut bulat adalah baik untuk dimiliki, dan saya pribadi menjaga ini untuk pengguna keren yang tidak menggunakan IE :).

Sekarang tentu saja itu bukan pendapat klien. Inilah tautannya: http://border-radius.com/



1

Tidak ada cara "yang terbaik"; ada cara yang bekerja untuk Anda dan cara yang tidak. Karena itu, saya memposting artikel tentang membuat CSS + Gambar, teknik sudut bulat cairan di sini:

Kotak dengan Sudut Bulat Menggunakan CSS dan Gambar - Bagian 2

Gambaran umum trik ini adalah yang menggunakan DIV bersarang dan pengulangan dan posisi gambar latar belakang. Untuk tata letak lebar tetap (ketinggian tetap lebar merenggang), Anda akan membutuhkan tiga DIV dan tiga gambar. Untuk tata letak lebar cairan (lebar dan tinggi yang dapat direnggangkan), Anda akan membutuhkan sembilan DIV dan sembilan gambar. Beberapa orang mungkin menganggapnya terlalu rumit tetapi IMHO itu solusi paling rapi yang pernah ada. Tanpa peretasan, tanpa JavaScript.


0

Saya menulis artikel blog tentang ini beberapa waktu lalu, jadi untuk info lebih lanjut, lihat di sini

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Ini bekerja dengan sangat baik. Tidak diperlukan Javascript, hanya CSS dan HTML. Dengan minimal HTML mengganggu hal-hal lain. Ini sangat mirip dengan apa yang diposting Mono, tetapi tidak mengandung peretasan spesifik IE 6, dan setelah memeriksa, tampaknya tidak berfungsi sama sekali. Selain itu, trik lain adalah membuat bagian dalam setiap gambar sudut transparan sehingga tidak memblokir teks yang ada di dekat sudut. Bagian luar tidak boleh transparan sehingga dapat menutupi perbatasan div tidak bulat.

Juga, begitu CSS3 didukung secara luas dengan radius batas, itu akan menjadi cara terbaik resmi untuk membuat sudut-sudut yang membulat.


0

Jangan gunakan CSS, jQuery telah disebutkan beberapa kali. Jika Anda membutuhkan kontrol penuh atas latar belakang dan batas elemen Anda, cobalah jQuery Background Canvas Plugin . Ini menempatkan elemen Kanvas HTML5 di latar belakang dan memungkinkan Anda untuk menggambar setiap latar belakang atau perbatasan yang Anda inginkan. Sudut membulat, gradien dan sebagainya.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.