Как сделать закруглённые края на

Как сделать закруглённые края на

Как сделать закруглённые края на

Как сделать закруглённые края на

Генератор border-radius CSS

px %  

Ввести
число

<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 () позволяет закруглить углы элемента HTML даже без применения свойства . Оно действует и на , и на . Но не на и .

background box-shadow outline [] border-image []

<div class="radius">содержимое блока</div>

Круглые углы у картинки

border-radius легко справится и с этой задачей, достаточно его добавить к . Лиса нюхает цветок

<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 таблица с закругленными углами

Закруглить таблицу можно, но с

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>

Я как и пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px

CSS скругление углов у border-image

Чтобы сделать скругленные углы у можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.

<div class="border-image-radius"> <div> <div>содержимое блока</div> </div> </div>

Округление outline

Firefox поддерживает . Но пока его нет в w3.org, почти полноценно заменяется ().

Закругление углов в примерах

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>
Источник: http://shpargalkablog.ru/2011/02/zakruglennye-ugly-css.html

Как сделать закруглённые края на

Как сделать закруглённые края на

Как сделать закруглённые края на

Как сделать закруглённые края на

Как сделать закруглённые края на

Как сделать закруглённые края на


X