Заоблени ъгли за вашият сайт
Понеже виждам че много хора искат заоблени ъгли в сайтовете си и постоянно гледам заглавия от типа: "Заоблени ъгли с CSS". Реших да направя урок който позволява да имате заоблени ъгли в сайта ви.
Изгледа е гарантиран през повечето версии на браузърите: Internet Explorer, Mozilla Firefox, Opera и др.



Това както знаете е CSS:
.rtop, .rbottom{display: block; background: #fff;}

.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;
height: 1px;
overflow: hidden;
background: #ccc;
}

.r1{margin: 0 5px;}

.r2{margin: 0 3px;}

.r3{margin: 0 2px;}

.rtop .r4, .rbottom .r4
{ margin: 0 1px;
height: 2px;
}
.xx{
background: #ccc

}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}

Разбира се той е като пример. Трябва да го преработите за желания изглед.
Ако има някои по-начинаещи ето и примерен код за страницата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<title>Заоблени ъгли във вашият сайт</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>
.rtop, .rbottom{display: block; background: #fff;}

.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;
height: 1px;
overflow: hidden;
background: #ccc;
}

.r1{margin: 0 5px;}

.r2{margin: 0 3px;}

.r3{margin: 0 2px;}

.rtop .r4, .rbottom .r4
{ margin: 0 1px;
height: 2px;
}
.xx{
background: #ccc

}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
</style>
</head>
<body>
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<div class="xx"><p>Текст...</p></div>
<div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</body>
</html>






/ Трябва да сте регистриран за да напишете коментар /
От: _Dea7h_
17:21 06-03-2010
Ами как да стане със заоблени ъгли при input textarea примерно ?
От: dany678
15:31 09-03-2010
По добре и бързо става със:
-moz-border-radius-topleft: число px;
-moz-border-radius-topright: число px;
-moz-border-radius-bottomleft: число px;
-moz-border-radius-bottomright: число px;
От: maxvolum
1:42 03-04-2010
Но, не работи при някои браузъри!
От: kikity_94
8:40 02-05-2010
това работи под всички браузари

border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
От: maxvolum
18:49 04-05-2010
Дори IE 6? Силно се съмнявам.
От: batmanabg
13:17 22-07-2011
Полезен урок.
1