Border-radius: membuat sudut bulat dengan CSS!

Properti border-radius CSS3 memungkinkan pengembang web untuk dengan mudah memanfaatkan sudut bulat dalam elemen desain mereka, tanpa perlu untuk gambar sudut atau penggunaan tag div ganda, dan mungkin salah satu yang paling berbicara tentang aspek CSS3. Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology. Sejak pertama kali diumumkan pada tahun 2005 properti boder-radius telah datang untuk menikmati mendukung browser luas (walaupun dengan beberapa perbedaan) dan, dengan relatif mudah digunakan, pengembang web telah cepat memanfaatkan teknologi ini muncul.

Here's a basic example: Berikut adalah contoh dasar:

This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9. Kotak ini harus memiliki sudut dibulatkan untuk Firefox, Safari / Chrome, Opera dan IE9.

The code for this example is, in theory, quite simple: Kode untuk contoh ini, dalam teori, cukup sederhana:

#example1 { # Example1 {
border-radius: 15px; border-radius: 15px;
} }

However, for the moment, you'll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details): Namun, untuk saat ini, Anda juga harus menggunakan -moz- awalan untuk mendukung Firefox (lihat bagian dukungan browser artikel ini untuk informasi lebih lanjut):

#example1 { # Example1 {
-moz-border-radius: 15px; -Moz-border-radius: 15px;
border-radius: 15px; border-radius: 15px;
} }

How it Works Cara Kerja

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property. sudut Rounder dapat dibuat secara mandiri menggunakan empat perbatasan individu-*- properti radius (border-bottom-left-radius, border-top-kiri-radius, dll) atau untuk keempat sudut secara bersamaan dengan menggunakan properti singkat border-radius.
We will firstly deal with the syntax for the individual border-*-radius properties before looking at how the border-radius shorthand property works. Kami terlebih dahulu akan berurusan dengan sintaks untuk properti border-*- radius individu sebelum melihat cara kerja singkat border-radius properti.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius border-bottom-left-radius, batas-bawah-kanan-radius, border-top-kiri-radius, border-top-right-radius

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box). Sifat perbatasan-*- radius dapat masing-masing menerima satu atau dua nilai, yang dinyatakan sebagai panjang atau persentase (persentase mengacu pada dimensi yang sesuai dari kotak perbatasan).

The Syntax: Sintaks:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]? border-*-*- radius: [<length> | <%>] [<length> | <%>]?

Examples: Contoh:

border-top-left-radius: 10px 5px; border-top-left-radius: 5px 10px;
border-bottom-right-radius: 10% 5%; border-bottom-kanan-radius: 10% 5%;
border-top-right-radius: 10px; border-top-kanan-radius: 10px;

Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge. Mana dua nilai yang dipasok ini digunakan untuk mendefinisikan, dalam rangka, jari-jari horizontal dan vertikal dari elips seperempat, yang pada gilirannya menentukan lengkungan sudut tepi batas luar.
Where only one value is supplied, this is used to define both the horizontal and vertical radii equally. Di mana hanya satu nilai diberikan, ini digunakan untuk menentukan baik radius horisontal dan vertikal sama.
The following diagram gives a few examples of how corners might appear given differing radii: Diagram berikut memberikan beberapa contoh tentang bagaimana sudut mungkin muncul diberikan radius yang berbeda:
border-radius-diagram-1

If either value is zero, the corner will be square, not round. Jika nilai baik adalah nol, sudut akan persegi, tidak bulat.

border-radius border-radius

The border-radius shorthand property can be used to define all four corners simultaneously. Properti border-radius singkat dapat digunakan untuk mendefinisikan semua empat penjuru secara bersamaan. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages. Properti ini menerima salah satu atau dua set nilai, masing-masing terdiri dari 1-4 panjang atau persentase.

The Syntax: Sintaks:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? [<length> | <percentage>] {1,4} [/ [<length> | <percentage>] {1,4}]?

Examples: Contoh:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; border-radius: 5px 5px 10px 10px / 10px 5px 10px 5px;
border-radius: 5px; border-radius: 5px;
border-radius: 5px 10px / 10px; border-radius: 5px 10px / 10px;

The first set of (1-4) values define the horizontal radii for all four corners. Set pertama (1-4) mendefinisikan nilai jari-jari horisontal untuk keempat sudut. An optional second set of values, preceded by a '/', define the vertical radii for all four corners. Sebuah set opsional kedua nilai, diawali dengan '/', tentukan radius vertikal untuk keempat sudut. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally. Jika hanya satu set nilai yang diberikan, ini digunakan untuk menentukan baik vertikal dan horisontal yang sama.
For each set of values the following applies: Untuk setiap set nilai-nilai berikut ini berlaku:
If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. Jika semua empat nilai yang diberikan, ini mewakili, top-kiri jari-jari kanan atas, bawah kanan dan kiri bawah masing-masing. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally. Jika kiri bawah dihilangkan itu adalah sama dengan kanan atas, jika kanan bawah dihilangkan itu adalah sama dengan top-kiri, dan jika hanya satu nilai yang diberikan itu digunakan untuk mengatur semua empat jari-jari sama.

Browser Support Dukungan Browser

At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.). Saat ini Opera (versi 10.5 dan seterusnya), Safari (versi 5 dan seterusnya) dan Chrome (versi 5 dan seterusnya) mendukung semua individu perbatasan-*- radius properti dan properti singkat border-radius sebagai native didefinisikan dalam Spesifikasi W3C saat ini (walaupun ada masih bug beredar isu-isu seperti gaya transisi perbatasan, menggunakan persentase untuk panjang, dll).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below). Mozilla Firefox (versi 1.0 dan seterusnya) mendukung border-radius dengan awalan--moz, meskipun ada beberapa perbedaan antara pelaksanaan Mozilla dan spesifikasi W3C saat ini (lihat di bawah).
Update: Recent Firefox nightly versions support border-radius without the -moz- prefix. Update: terbaru Firefox versi malam dukungan border-radius tanpa awalan-moz-.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius). Safari dan Chrome (dan browser berbasis webkit) telah mendukung border-radius dengan webkit-awalan-sejak versi 3 (tidak diperlukan lagi dari versi 5 dan seterusnya), walaupun lagi dengan beberapa perbedaan dari spesifikasi saat ini (lihat artikel ini untuk rincian lebih lanjut tentang bagaimana versi Webkit menangani border-radius).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix). Bahkan Microsoft telah berjanji, dan menunjukkan dalam preview rilis terbaru mereka, dukungan untuk border-radius dari Internet Explorer 9 dan seterusnya (tanpa awalan).

The -moz- prefix The-moz-prefix

Mozilla's Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. Browser Mozilla Firefox telah mendukung-radius properti perbatasan, dengan -moz- awalan, sejak versi 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners, ie accepting two values per corner to determine the horizontal and verical radii independently. Namun, hanya sejak versi 3.5 bahwa browser telah memungkinkan sudut elips, yaitu menerima dua nilai per sudut untuk menentukan radius horisontal dan verical independen. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii. Sebelum versi 3.5, browser hanya menerima satu nilai per sudut, sehingga sudut dengan jari-jari horisontal dan vertikal sama.
The syntax, from Firefox 3.5 onwards, for the main part follows the current W3C specification, as described throughout this article, prefixed by -moz-. Sintaks, dari Firefox 3.5 dan seterusnya, untuk bagian utama mengikuti spesifikasi W3C saat ini, seperti dijelaskan di artikel ini, diawali dengan-moz-. The only major difference is in the naming of the individual border-*-radius properties, with the -moz- prefixed properties following a slightly different naming convention as follows: Satu-satunya perbedaan utama adalah pada penamaan sifat perbatasan-*- radius individu, dengan sifat-sifat-moz-diawali mengikuti konvensi penamaan yang sedikit berbeda sebagai berikut:

W3C Specification Spesifikasi W3C	Mozilla Implementation Mozilla Implementasi
border-radius border-radius	-moz-border-radius -Moz-border-radius
border-top-left-radius border-top-kiri-radius	-moz-border-radius-topleft -Moz-border-radius-topleft
border-top-right-radius border-top-right-radius	-moz-border-radius-topright -Moz-border-radius-topright
border-bottom-right-radius border-bottom-kanan radius	-moz-border-radius-bottomright -Moz-border-radius-bottomright
border-bottom-left-radius border-bottom-left-radius	-moz-border-radius-bottomleft -Moz-border-radius-bottomleft

The Mozilla implementation also behaves slightly differently from the specification when percentages are supplied. Pelaksanaan Mozilla juga berperilaku sedikit berbeda dari spesifikasi ketika persentase disediakan. You can read more on the Mozilla Developer Center here . Anda dapat membaca lebih lanjut pada Mozilla Developer Center di sini .

Cross Browser Examples Cross Browser Contoh

Here's a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9: Berikut adalah beberapa contoh dasar yang harus bekerja dalam versi terbaru Firefox, Safari / IE9 Chrome, Opera dan bahkan:

A A

B B

C C

D D

E E

F F

#Example_A { # Example_A {
height: 65px; height: 65px;
width:160px; width: 160px;
-moz-border-radius-bottomright: 50px; -Moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px; border-bottom-kanan-radius: 50px;
} } #Example_B { # Example_B {
height: 65px; height: 65px;
width:160px; width: 160px;
-moz-border-radius-bottomright: 50px 25px; -Moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 50px 25px; border-bottom-kanan-radius: 50px 25px;
} }
#Example_C { # Example_C {
height: 65px; height: 65px;
width:160px; width: 160px;
-moz-border-radius-bottomright: 25px 50px; -Moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 25px 50px; border-bottom-kanan-radius: 25px 50px;
} }
#Example_D { # Example_D {
height: 5em; tinggi: 5em;
width: 12em; width: 12em;
-moz-border-radius: 1em 4em 1em 4em; -Moz-border-radius: 1em 4em 4em 1em;
border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 4em 1em;
} }
#Example_E { # Example_E {
height: 65px; height: 65px;
width:160px; width: 160px;
-moz-border-radius: 25px 10px / 10px 25px; -Moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px;
} }
#Example_F { # Example_F {
height: 70px; height: 70px;
width: 70px; width: 70px;
-moz-border-radius: 35px; -Moz-border-radius: 35px;
border-radius: 35px; border-radius: 35px;
} }

Additional Notes & Further Reading Catatan Tambahan & Bacaan Lanjutan

The W3C Backgrounds and Borders Specification goes into further detail on how the corner is shaped (especially in circumstances where two adjoining border have different widths), the effect of border-radius on background images, color and style transitions, what happens when curves overlap and the effect of border-radius on tables. W3C Backgrounds dan Batas Spesifikasi masuk ke detail lebih lanjut tentang bagaimana sudut berbentuk (khususnya dalam keadaan di mana dua perbatasan yang berdampingan memiliki lebar yang berbeda), efek border-radius pada gambar latar belakang, warna dan gaya transisi, apa yang terjadi ketika kurva tumpang tindih dan efek border-radius di atas meja.
This is best explained in the following sections of the specification: Ini paling baik dijelaskan dalam bagian berikut spesifikasi:

Sumber : http://translate.google.co.id/translate?hl=id&langpair=en|id&u=http://www.css3.info/preview/rounded-border/

Petik Ilmu