Mengatur radius pembulatan sudut bingkai. Jika bingkai tidak ditentukan, maka pembulatan juga terjadi pada latar belakang.

Informasi singkat

Sebutan

Nilai-nilai

Diperbolehkan menggunakan satu, dua, tiga atau empat nilai, mencantumkannya dengan dipisahkan oleh spasi (Tabel 1). Boleh juga menulis dua nilai yang dipisahkan dengan garis miring (/). Nilainya adalah angka dalam format apa pun yang dapat diterima untuk CSS. Saat menggunakan persentase, hitungannya relatif terhadap lebar blok.

Dalam hal menentukan dua parameter melalui garis miring, parameter pertama menentukan radius secara horizontal, dan yang kedua – secara vertikal (sudut elips). Pada Gambar. Gambar 1 menunjukkan perbedaan antara sudut bulat beraturan dan sudut elips.

Beras. 1. Pembulatan radius untuk dibuat jenis yang berbeda sudut

Bak pasir

Winnie the Pooh selalu tidak segan-segan untuk sedikit refreshing, apalagi pada jam sebelas pagi, karena saat itu sarapan sudah lama berakhir, dan makan siang belum dimulai. Dan, tentu saja, dia sangat senang melihat Kelinci mengeluarkan cangkir dan piring.

div ( latar belakang: #e4efc7; batas: 1px solid #333; padding: 10px; radius batas: 0 ; )

Contoh

Hasil contoh ini ditunjukkan pada Gambar. 2.

Beras. 2. Jari-jari pembulatan

Model objek

Obyek.style.borderRadius

Catatan

Chrome sebelum versi 4.0, Safari sebelum versi 5.0, dan Android sebelum versi 2.1 menggunakan properti -webkit-border-radius.

Firefox sebelum versi 4.0 menggunakan properti -moz-border-radius.

Spesifikasi

Setiap spesifikasi melewati beberapa tahap persetujuan.

• Rekomendasi - Spesifikasi telah disetujui oleh W3C dan direkomendasikan sebagai standar.
• Rekomendasi Kandidat ( Rekomendasi yang mungkin ) - kelompok yang bertanggung jawab atas standar tersebut merasa yakin bahwa standar tersebut telah mencapai tujuannya, namun memerlukan bantuan dari komunitas pengembang untuk menerapkan standar tersebut.
• Usulan Rekomendasi Rekomendasi yang Disarankan) - pada tahap ini dokumen diserahkan ke Dewan Penasihat W3C untuk persetujuan akhir.
• Draf Kerja - Versi draf yang lebih matang yang telah dibahas dan diubah untuk ditinjau oleh komunitas.
• Draf redaksi ( Draf redaksi) - versi draf standar setelah perubahan dilakukan oleh editor proyek.
• Draf ( Spesifikasi rancangan) - versi draf pertama dari standar.

Untuk mengontrol batas suatu elemen, gunakan properti perbatasan generik. Properti ini memungkinkan Anda mengatur ketebalan, gaya, dan warna batas elemen dalam satu deklarasi.

Ketiga properti ini (ketebalan batas, gaya batas, dan warna) dapat diatur dalam satu deklarasi. Berikut ini contohnya:

Anda dapat menentukan gaya batas hanya pada satu sisi elemen. Untuk melakukan ini, gunakan properti border-top (batas atas), perbatasan-kanan (perbatasan kanan), perbatasan-bawah (batas bawah), perbatasan-kiri (perbatasan kiri).

Dalam contoh ini, setiap sisi blok memiliki ketebalan, gaya, dan warna tepi yang berbeda.

Pikirkan tentang bagaimana caranya bantuan CSS Anda dapat membuat bentuk seperti ini:

Nilai batas - ketebalan, gaya dan warna - dapat diatur secara terpisah menggunakan properti khusus.

• gaya perbatasan - gaya perbatasan.
• lebar batas - lebar batas.
• warna batas - warna batas.

Mari kita pertimbangkan masing-masing nilai secara terpisah.

properti bergaya perbatasan Gaya perbatasan.

Properti border-style mengatur gaya perbatasan. Di CSS, di Perbedaan HTML, batas suatu elemen tidak hanya solid. Nilai berikut diperbolehkan untuk gaya perbatasan:

1. tidak ada - tidak ada batas (default).
2. padat - batas padat.
3. ganda - batas ganda.
4. putus-putus - batas putus-putus.
5. putus-putus - batas yang terbuat dari serangkaian titik.
6. punggung bukit - perbatasan "punggung bukit".
7. alur - batas "alur".
8. inset - batas tertekan.
9. awal - perbatasan yang diekstrusi.

Contoh penampilan mereka.

tidak ada batas (tidak ada)

perbatasan yang kokoh

perbatasan ganda

batas rangkaian titik (putus-putus)

perbatasan putus-putus

batas alur

perbatasan punggungan

batas menjorok (inset)

perbatasan yang diekstrusi (awal)

Omong-omong, jika Anda mengatur warna batas menjadi hitam untuk bingkai punggungan, Anda akan mendapatkan hasil ini.

Blok div dengan garis tepi hitam dan gaya punggung bukit.

Bingkainya tampak kokoh, namun itu karena gaya bubungan dibuat dengan menambahkan efek bayangan hitam, dan efek hitam tidak terlihat pada bingkai hitam.

Dengan menggunakan properti border-style, gaya perbatasan dapat diatur tidak hanya untuk semua sisi blok. Dimungkinkan untuk menetapkan beberapa nilai untuk satu properti gaya batas; bergantung pada jumlah nilai, gaya batas akan ditetapkan ke jumlah sisi blok yang berbeda. Anda dapat menetapkan satu, dua, tiga atau empat nilai. Mari kita lihat contoh untuk setiap kasus.

Satu nilai (padat) - gaya batas diatur untuk semua sisi blok.

Dua nilai (ganda padat) - nilai pertama mengatur gaya untuk sisi atas dan bawah, nilai kedua untuk samping.

Tiga nilai (titik ganda padat) - nilai pertama untuk sisi atas, nilai kedua untuk samping, dan nilai ketiga untuk bawah.

Empat nilai (titik ganda padat putus-putus) - setiap nilai untuk satu sisi searah jarum jam mulai dari atas.

Properti lebar batas. Ketebalan perbatasan.

Untuk mengatur lebar batas elemen, gunakan properti border-width. Ketebalan pembatas dapat diatur di mana saja satuan absolut pengukuran, misalnya dalam piksel.

Seperti properti bergaya perbatasan, properti juga dapat diatur ke satu hingga empat nilai. Mari kita lihat contoh untuk setiap kasus.

Contoh kode:

Ada juga nilai kata kunci untuk properti border-width. Totalnya ada tiga:

• tipis - perbatasan tipis;
• ketebalan sedang - sedang;
• tebal - batas tebal;

Ketebalan batas: tipis.

Ketebalan batas: sedang.

Ketebalan batas: tebal.

Properti warna batas. Warna perbatasan.

Untuk mengontrol warna batas, gunakan alat warna batas. Warna untuk properti ini dapat diatur menggunakan metode apa pun yang dijelaskan dalam artikel "Warna dalam CSS", yaitu:

• Notasi heksadesimal (#ff00aa) dari warna.
• Format RGBnya adalah rgb(255,12,110) . format RGBA untuk CSS3.
• Format HSL dan HSLA untuk CSS3.
• Nama warna, misalnya hitam. Daftar lengkap Nama warna diberikan dalam tabel nama warna CSS.

Properti border-color juga dapat memiliki satu hingga empat nilai dan memperlakukannya serupa dengan properti sebelumnya.

Satu nilai (merah).

Dua nilai (merah hitam).

Tiga nilai (merah hitam kuning).

Empat nilai (merah hitam kuning biru).

Sekarang mari kita kembali ke soal di atas dan menggambar sebuah gambar:

Berikut adalah kode untuk menggambar gambar seperti itu, hanya saja ukurannya lebih besar:

Menetapkan nilai untuk sisi secara terpisah

Telah disebutkan di atas bahwa Anda dapat menentukan nilai properti perbatasan hanya untuk satu sisi blok. Ada properti untuk tujuan ini:

• perbatasan-atas
• border-right (batas kanan)
• perbatasan-bawah
• border-left (batas kiri)

Izinkan saya mengingatkan Anda bahwa untuk semua properti, ada tiga nilai yang ditentukan (ketebalan, gaya, dan warna) dalam urutan apa pun. Namun ada properti yang memungkinkan Anda mengatur ketebalan, warna, dan gaya untuk setiap sisi secara terpisah. Penulisan sifat-sifat tersebut berasal dari penjelasan di atas.

Opsi batas atas (border-top).

• border-top-color - mengatur warna batas atas elemen.
• border-top-width - mengatur ketebalan batas atas elemen.
• border-top-style - mengatur gaya batas atas elemen.

Opsi batas kanan (border-right).

• border-right-color - mengatur warna batas kanan elemen.
• border-right-width - mengatur ketebalan batas kanan elemen.
• border-right-style - mengatur gaya batas kanan elemen.

Opsi batas bawah (border-bottom).

• border-bottom-color - mengatur warna batas bawah elemen.
• border-bottom-width - mengatur ketebalan batas bawah elemen.
• border-bottom-style - mengatur gaya batas bawah elemen.

Opsi batas kiri (border-left).

• border-left-color - mengatur warna batas kiri elemen.
• border-left-width - mengatur ketebalan batas kiri elemen.
• border-left-style - mengatur gaya batas kiri elemen.

Contoh penggunaan properti ini:

Properti radius perbatasan. Membulatkan sudut perbatasan.

Properti border-radius dimaksudkan untuk membulatkan sudut batas suatu elemen. Properti ini muncul di CSS3 dan berfungsi dengan benar di semua browser modern, kecuali Penjelajah Internet 8 (dan versi yang lebih lama).

Nilainya bisa berupa angka apa pun yang digunakan dalam CSS.

Properti radius batas: 15px.

Jika bingkai blok tidak ditentukan, maka fillet terjadi dengan latar belakang. Berikut ini contoh balok bulat tanpa pembatas, namun dengan warna latar belakang:

Properti radius batas: 15px.

Ada properti untuk membulatkan setiap sudut elemen. Contoh ini menggunakan semuanya:

Radius batas kiri atas: 15 piksel; radius batas-kanan-atas: 0; radius batas-kanan-bawah: 15px; radius batas-kiri-bawah: 0;

Properti radius batas: 15px.

Meskipun kode ini dapat ditulis dalam satu deklarasi: border-radius : 15px 0 15px 0 . Faktanya adalah properti radius batas dapat diatur dari satu hingga empat nilai. Tabel di bawah menguraikan peraturan yang mengatur pengumuman tersebut.

Setelah mempelajari tabel ini dengan cermat, Anda dapat memahami entri terpendek itu gaya yang diinginkan akan menjadi seperti ini: border-radius : 15px 0 . Hanya ada dua arti.

Sedikit latihan

Menggambar lemon menggunakan CSS.

Berikut adalah kode untuk blok tersebut:

Margin: 0 otomatis; /* Tengahkan blok */ lebar: 200px; tinggi: 200 piksel; latar belakang: #F5F240; batas: 1 piksel padat #F0D900; radius batas: 10px 150px 30px 150px;

Kami telah menggambar gambarnya:

Sekarang mari kita tinggalkan segitiga darinya:

Kode segitiganya adalah:

Margin: 0 otomatis; /* Tengahkan blok */ padding: 0px; lebar: 0 piksel; tinggi: 0; batas: 30px putih solid; warna batas bawah: merah;

). Ini dilakukan dengan menggunakan properti radius batas CSS. Pada artikel ini kita akan melihat semua opsi yang berbeda.

Sintaks radius batas CSS adalah:

radius batas : [ fillet_nilai];

Cara membulatkan sudut dalam HTML menggunakan CSS

Mari kita lihat contoh pembulatan sudut menggunakan CSS. Misalnya

В этом случае все 4 края элемента будут скруглены по 30px.

Значение скругления означает то, какой радиус окружности должен быть в уголке.

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

border-radius : 10px 7px 0px 0px ;

Последовательность этих цифр следующая:

• Верхний левый угол (в примере это 10px)
• Верхний правый угол (в примере это 7px)
• Нижний правый угол (в примере это 0px)
• Нижний левый угол (в примере это 0px)

Например

Результат:

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол

Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

Результат:

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

border-radius : 100px / 200px ;

Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.

Задание толщины, цвета и типа линии при скруглении

Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :

border : [толщина ] [тип_линии ] [цвет ];

Например:

border : 1px solid #00ff00 ;

• Толщина - задается чаще всего в пикселях
• Тип линии может принимать значения:
  • solid (сплошной)
  • dashed (пунктирный)
  • dotted (ряд точек)
  • groove (линия бороздка)
  • inset (вдавленная линия)
  • outset (выдавленная линия)
• Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)

Приведем пример

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

box-shadow : 0px 0px 4px 2px #a0b ;

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).

Например

Результат:

Мы приводили всегда в качестве примеров тег

. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :

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

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Border: 1px solid black;

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Border-width: thick; border-style: solid; border-color: black;

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:

Box { border: 1px solid red; } .box:hover { border: 1px solid green; }

Более элегантно и проще можно сделать следующим образом:

Box { border: 1px solid red; } .box:hover { border-color: green; }

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border- radius - это «золотое» свойство CSS3 - первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

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

В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.

Еще одна привилегия в том, что мы можем использовать специальные значения для каждой из сторон блока:

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:

Lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }

Идем далее основ

Во многих дизайнеров все познания, в области css свойства border, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Border: 20px groove #e3e3e3;

Или в расширенном синтаксисе:

Border-color: #e3e3e3; border-width: 20px; border-style: groove;

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки - использование свойства outline.

Box { border: 5px solid #292929; outline: 5px solid #e3e3e3; }

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

Псевдоэлементы

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов:before и:after. С помощью которых можно добавить дополнительные рамки к элементу:

Box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; }

На вид не очень элегантно, но по крайней мере, это работает. Немного проблемно разобраться с последовательность цветов в рамках… но понять можно.

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

Box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; }

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

В дополнение к используемому простому значению border-radius, мы можем указать два отдельных - разделяя их через / мы укажем горизонтальный и вертикальный радиус.

Для примера:

Border-radius: 50px / 100px; /* horizontal radius, vertical radius */

… это равносильно:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:

Box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Box { width: 200px; height: 200px; background: black; }

Наиболее частый пример использования CSS форм - создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

Arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }

Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:

Arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; }

Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.

Arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; }

Отлично получилось! Но это противоречит семантической верстке , создавать.arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Hi there!

Speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; }

Speech-bubble:after { content: ""; }

На этом этапе, мы создадим стрелочку, которую делали прежде, добавим к элементу и остается только позиционировать:

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; }

Если мы хотим, чтобы стрелочка была направлена вниз, нам придется установить все border прозрачными, кроме верхнего.

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; }

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; }

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Speech-bubble { /* … other styles */ border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ }

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

/* Speech Bubbles Usage: примените класс.speech-bubble и.speech-bubble-НАПРАВЛЕНИЕ, как показано ниже

Hi there

*/ .speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; } /* Position the Arrow */ .speech-bubble-top:after { border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; } .speech-bubble-right:after { border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; } .speech-bubble-bottom:after { border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; } .speech-bubble-left:after { border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; }

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Speech-bubble { /* other styles */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; }

Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы - даже сердечки и знак биологической опасности.

Biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow; }

Заключение

CSS свойства

Определение и применение

CSS свойство border-radius позволяет определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip .

1. Скругление углов отсутствует. Значение по умолчанию 0 (ноль).
2. Скругление углов (по типу дуги окружности ). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em, cm и т.д.) и определяют r adius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый). Если bottom-left (нижний левый) опущен, то он такой же, как top-right (верхний правый угол). Если bottom-right (нижний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Если top-right (верхний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Допускается указывать значения в процентах.
3. Скругление углов (по типу дуги эллипса) . Значения указываются в единицах измерения CSS (px, em, cm и т.д.). Порядок указания значений следующий (нижнее изображение): задаются значение /-я (от одного до четырёх) h orisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) v ertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Поддержка браузерами

Свойство			Opera		IExplorer	Edge
border-radius	5.0 4.0 -webkit-	4.0 3.0 -moz-	10.5	5.0 3.1 -webkit-	9.0	12.0

CSS синтаксис:

border-radius: "1-4 length | 1-4 % | 1-4 length или 1-4 % / 1-4 length или 1-4 % | initial | inherit" ; /* Радиус применяется ко всем четырем углам (по типу дуги окружности) */ border-radius : 15px; /* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 15px 35%; /* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 14px 18px 50%; /* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 22% 11px 14px 15px; /
вертикальный радиус - значение применяется ко всем четырем углам */ border-radius : 15px 15% / 15px; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 10px 15% / 10px 40px; /* горизонтальный радиус 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right /
вертикальный радиус - 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 20px 15px 6em / 20px 25px 30%; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 15px 15% / 10px 15em 15px 5em;

JavaScript синтаксис:

Object.style.borderRadius = "5px"

Значения свойства

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

kelas = "oranye" > 50 piksel

50 piksel 25%

25 piksel 75% / 4em