Генератор border-radius CSS
Ввести
число ⇩ | |||||
<style> .radius { border: 2px solid CornflowerBlue; border-radius: 0 /* по умолчанию */; } /* или (две записи равнозначны) */ .radius { border: 2px solid CornflowerBlue; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } </style> <div class="radius">содержимое блока с закруглёнными углами</div>
Как сделать закругленные углы CSS
Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.
Круглые углы у картинки
border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.
<img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg" style="border-radius: 100%;">
Закруглить края у видео на YouTube
<iframe src="http://www.youtube.com/embed/fXwUPXY9eaY?rel=0" frameborder="0" allowfullscreen style="border: 20px solid #1b1b1b; border-radius: 20px; box-sizing: border-box;"></iframe>
HTML таблица с закругленными углами
Закруглить таблицу можно, но с border-collapse: separate;
1 | 2 | 3 |
---|---|---|
1.1 | 2.1 | 3.1 |
1.2 | 2.2 | 3.2 |
<table class="tableR"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tr> <td>1.1</td> <td>2.1</td> <td>3.1</td> </tr> <tr> <td>1.2</td> <td>2.2</td> <td>3.2</td> </tr> </table>
border-radius у вложенных элементов
Сравните
<div class="dva1"><div></div></div> <div class="dva2"></div> <div class="dva3"><div></div></div>
Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы
внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px
CSS скругление углов у border-image
Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.
Округление outline
Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).
Закругление углов в примерах
HTML овал
<style> .radius { height: 200px; border: 7px solid red; border-radius: 100%; } </style> <div class="radius">...</div>
HTML круг
Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.
<style> .radius { width: 200px; height: 200px; border: 7px solid red; border-radius: 100%; } </style> <div class="radius">...</div>
HTML цилиндр
<style> .radius { width: 200px; height: 200px; border: 7px dashed red; border-radius: 100%/20%; } </style> <div class="radius">...</div>
Закругленные три края, HTML капля
<style> .radius { width: 200px; height: 200px; border: 7px inset red; border-radius: 0% 100% 100%; } </style> <div class="radius">...</div>
HTML полукруг
<style> .radius { width: 200px; height: 200px; border: 1px dashed red; border-radius: 100% 100% 0% 0%; } </style> <div class="radius">...</div>
HTML лист
<style> .radius { width: 200px; height: 200px; border: 7px groove red; border-radius: 70% 0 / 70%; } </style> <div class="radius">...</div>
HTML яйцо
<style> .radius { width: 200px; height: 300px; border-radius: 80% / 100% 100% 60% 60%; background: #f1f1f1; } </style> <div class="radius">...</div>
Камушек HTML
<style> .radius { width: 200px; height: 200px; border-radius: 60% 80% / 100% 90% 60% 50%; background: #f1f1f1; } </style> <div class="radius">...</div>Слайды с конференции
29 комментариев:
Приятный сайт,полезная статья
Мой блог http://revival2012nataliz.blogspot.com/
Мой мозг х) Наталья, может, стоит написать "использовать блок квадратной формы"? :)
Для скругления в IE 6-8 есть доп коды - http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним.
Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта - нажми кнопку "Обновить".
Не работает стиль
/*Круглые углы у таблицы */
div.radius {
border-radius: 15px;
background: #e7d5c0;
}
/*Круглые углы у таблицы конец */
Если ставлю стиль
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
для другого див
Вам что нужно: 15px или 50%?
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?
ссылка на страницу, где применяются оба класса: http://ex-hort.ru/
class="grayscale grayscale-fade"
CSS: /*обесцвечивание круглой картинки */
img.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
}
img.grayscale:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
}
.grayscale.grayscale-replaced > svg {
transition: opacity 1s ease;
opacity: 1;
}
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
}
/*обесцвечивание круглой картинки конец */
CSS: /*Круглые углы у таблицы */
div.radius {
border-radius: 15px;
background: #e7d5c0;
}
/*Круглые углы у таблицы конец */
До того как в CSS вставил /*обесцвечивание круглой картинки */
img.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
}
img.grayscale:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
}
.grayscale.grayscale-replaced > svg {
transition: opacity 1s ease;
opacity: 1;
}
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
}
ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius {
border-radius: 15px;
background: #e7d5c0;
}
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */
Стиль border-radius: 15px; тупо не работает.
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
}яЛП
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel="nofollow" на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru
По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на "Шпаргалку блоггера" ведут в основном такие.