Закруглені кути через css

Напевно, Ви часто зустрічали блоки із закругленими кутами. За прикладом далеко ходити не треба, достатньо подивитися вправо і придивитися до моїх блокам, у яких якраз кути і закруглені. Варто відзначити, що способів створення цього дуже багато. У кожного з них є свої переваги і недоліки, і я розгляну один з них, яким зазвичай і користуюся.

Для початку потрібно 4 зображення, кожне з яких відповідає за свій кут блоку. Далі напишіть такий HTML-код:

class="Roundborder"gt; 
  
  
  
  
/ Gt;

І такий CSS-код:

.roundborder { 
 border:2px solid # ffd460- 
} 
.roundborder div { 
 background: url(../images/t-l.png) top left no-repeat- 
 margin:-2px- 
 position: relative- 
} 
.roundborder div div { 
 background: url(../images/t-r.png) top right no-repeat- 
 margin:0- 
} 
.roundborder div div div { 
 background: url(../images/b-r.png) bottom right no-repeat- 
} 
.roundborder div div div div { 
 background: url(../images/b-l.png) bottom left no-repeat- 
 padding:20px- 
}

За назвою картинок, думаю, що їх призначення зрозуміло, проте, на всякий випадок поясню:

t-l - верхній лівий кут
t-r - верхній правий вугол
b-l - нижній лівий кут
b-r - нижній правий кут

властивість padding Ви можете задавати своє, так як воно всього лише робить відступ контенту від закругленою рамки. Також зверніть увагу, властивість border має бути товщиною з рамкою в зображенні, а властивість margin: -2px, можливо, так само доведеться поміняти, оскільки це значення має дорівнювати ширині картинки, взятої зі знаком мінус.

Ось таким нескладним способом робляться закруглені кути через CSS. Великою перевагою даного способу є те, що він є кросбраузерності. А в якості мінуса я б відзначив велику кількість div.

Поділися в соціальних мережах:

Схожі