Закругление углов у блока

@Doberman1983 · Регистрация: 29.12.2010

Студворк — интернет-сервис помощи студентам

Подскажите как закруглить уголки у блока чтобы во всех браузерах отображалось ?

@webarts · 01.01.2011, 18:13

Здесь исчерпывающая инфа http://www.tultip.net/verstka/... ajjta.html

@Doberman1983 · 01.01.2011, 18:37 **[ТС]**

Но это все с картинками , а я бы хотел без картинок.

@webarts · 01.01.2011, 18:58

тогда вот http://www.google.ru/url?sa=t&... 0C7HB938rw

@vasvas7775 · 02.01.2011, 08:42

Вот один вариант

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.r1, .r2, .r3 {display: block; height: 1px;}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#hesder-box .hesder-box, #hesder-box  b {background-color:#339933;}
#block-box .block-box, #block-box  b {background-color:#C0C0C0;}
#right-box .right-box, #right-box  b {background-color:#C0C0C0;}
#left-box .left-box, #left-box  b {background-color:#339933;}
#menu-box .menu-box, #menu-box  b {background-color:#99CC66;}
.inner-box {padding:1em;}
.r1, .r2, .r3 {overflow: hidden; font-size:1px;}
</style>
 
<div id="menu-box">
   <b class="r3"></b><b class="r1"></b><b class="r1"></b>
   <div class="menu-box">
                Привет, я блок с закругленными краями.
     </div>
    <b class="r1"></b><b class="r1"></b><b class="r3"></b>
    </div>

А вот другой

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,html{
    height:100%;
    width:100%;
    overflow-x:hidden;
}
div.w
{
    width: 100%;
    height:100%;
    margin: 0 auto;
    overflow:hidden;
}    
 
    div.box-c
    {
        height:20px;
        margin: 0 20px;
        position: relative;
        background: #C32300;
    }
     
        div.box-c em b 
        {
           position:absolute;
           font:150px Arial;
           line-height:40px;
           font-weight:normal;
        }
         
        .ctl, .cbl, .ctr, .cbr 
        {
           z-index:11;
           width:20px;
           height:20px;
           color:#C32300;     
           overflow:hidden;
           position:absolute;  
           background:transparent;
            
        }
         
        .ctl {top:0; left:-20px;}
        .cbl {bottom:0; left:-20px;}
        .ctr {top:0; right:-20px;}
        .cbr {bottom:0; right:-20px;}
 
        .ctl b {left:-8px;}
        .ctr b {left:-25px;}
        .cbl b {left:-8px; top:-17px;}
        .cbr b {left:-25px; top:-17px;}
         
    div.box-inner
    {
        padding: 0 20px;
        background: #C32300;
    }
</style>
</head>
<body>
    <div class="box w">
        <div class="box-c">
            <em class="ctl"><b>&bull;</b></em>
            <em class="ctr"><b>&bull;</b></em>
        </div>
        <div class="box-inner">
            Текст
        </div>
        <div class="box-c">
            <em class="cbl"><b>&bull;</b></em>
            <em class="cbr"><b>&bull;</b></em>
        </div>
    </div>
</body>
</html>

@Doberman1983 · 02.01.2011, 14:46 **[ТС]**

vasvas7775, Ну дак это радиус в 3 пикселя - а если надо будет в 5 или 10 ???

@vasvas7775 · 02.01.2011, 15:30

в таком случае второй код

@lwpai_frimin · 02.01.2011, 23:27

вот
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

Правда в IE и opera не работает

Vovan-VE · 03.01.2011, 06:08

Сообщение от lwpai_frimin

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

Еще

CSS
1
2
border-radius: 7px; /* Opera 10.53+, Chrome 4+ */
-khtml-border-radius: 7px; /* ? */

IE6+ http://rmcreative.ru/blog/post... der-radius

@Doberman1983 · 03.01.2011, 07:12 **[ТС]**

Сообщение от lwpai_frimin

вот
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

Правда в IE и opera не работает

Вот как раз то оно только в опере и работает , а в мозилле , сафари и ie не работает!!!

Vovan-VE · 03.01.2011, 08:12

Doberman1983, Так надо их все 4 вместе

CSS
1
2
3
4
5
6
... {
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
}

@Akvas · 03.01.2011, 21:38

Может что-то типа этого?

CSS
1
2
3
4
5
6
7
8
9
10
11
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {display:block; height:1px; overflow:hidden; font-size:1px;}
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

@Doberman1983 · 04.01.2011, 23:49 **[ТС]**

Сообщение от Vovan-VE

Doberman1983, Так надо их все 4 вместе

CSS
1
2
3
4
5
6
... {
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
}

вот и это тоже не помогает

Добавлено через 1 минуту

Сообщение от Akvas

Может что-то типа этого?

CSS
1
2
3
4
5
6
7
8
9
10
11
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {display:block; height:1px; overflow:hidden; font-size:1px;}
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

получается не полукруг а срез угла

Новые блоги и статьи Все статьи Все блоги /
1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .

@Doberman1983 0 / 0 / 3 Регистрация: 29.12.2010 Сообщений: 123

	Закругление углов у блока 01.01.2011, 17:32. Показов 4759. Ответов 12 Метки нет (Все метки) Подскажите как закруглить уголки у блока чтобы во всех браузерах отображалось ? 0

@webarts 73 / 17 / 0 Регистрация: 23.12.2010 Сообщений: 203
	01.01.2011, 18:13
	Здесь исчерпывающая инфа http://www.tultip.net/verstka/... ajjta.html 0

@Doberman1983 0 / 0 / 3 Регистрация: 29.12.2010 Сообщений: 123
	01.01.2011, 18:37 [ТС]
	Но это все с картинками , а я бы хотел без картинок. 0

@webarts 73 / 17 / 0 Регистрация: 23.12.2010 Сообщений: 203
	01.01.2011, 18:58
	тогда вот http://www.google.ru/url?sa=t&... 0C7HB938rw 0

@Doberman1983 0 / 0 / 3 Регистрация: 29.12.2010 Сообщений: 123
	02.01.2011, 14:46 [ТС]
	vasvas7775, Ну дак это радиус в 3 пикселя - а если надо будет в 5 или 10 ??? 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	02.01.2011, 15:30
	в таком случае второй код 0

@lwpai_frimin 1 / 1 / 1 Регистрация: 23.10.2010 Сообщений: 35
	02.01.2011, 23:27
	вот -moz-border-radius: 7px; -webkit-border-radius: 7px; Правда в IE и opera не работает 0