Закругленные углы на поле

Question

Я заметил, что тег "fieldset" отображает скругленную угловую границу в IE (он отображается в квадрате в других браузерах).

<fieldset>
         <legend>My legend</legend>
</fieldset>

НО, если я установлю стиль CSS для набора полей, закругленные углы исчезнут !!

Кто-нибудь знает почему? Как сохранить закругленные углы, но с другим цветом границы?

[РЕДАКТИРОВАТЬ]: извините за путаницу, я не спрашиваю, как иметь углы округления в Firefox / других браузерах, я хочу знать, как сохранить углы округления в IE и иметь другую границу цвет (border-color: red; на наборе полей меняет квадраты на квадраты ...).

Answer 1

На этом сайте исправлены проблемы, связанные с закругленными углами fieldset и IE10. В IE все еще есть проблемы (грустное лицо). Вы должны использовать его на 100% времени.

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

Answer 2

Нет никакого ПОЧЕМУ как такового, не секрет, что браузеры ведут себя по-разному.

Вы изучали атрибут -moz-border-radius ?

Я думаю, что-то вроде

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}  

работает в FireFox / Mozilla, но прошло много времени с тех пор, как я пытался: D

Answer 3

Границы в IE округляются только в том случае, если 1) в разделе «Производительность | Вкладка Визуальные эффекты. Проще говоря: если у вас включена функция «Тематика XP», она будет округлена, а когда у вас классический стиль Win2000, она не будет округлена.

Вторым требованием 2) является отсутствие CSS для границ для набора полей. Всякий раз, когда вы назначаете цвет границы, или стиль рамки, или ширину границы, «округлость» исчезает, для этого нет обходного пути. То же самое касается ввода (как кнопок, так и полей), текстового поля и тегов выбора. Всякий раз, когда IE не находит CSS-тематику для элемента управления, он будет применять «тему Windows по умолчанию» к элементу управления.

Answer 4

Некоторые элементы (кнопки, поля ввода) по умолчанию используют системные визуальные стили - а в стандартных темах Windows XP / Vista наборы полей имеют закругленные углы. (Взгляните, например, на «Свойства экрана».)

Если вы назначите какой-либо стиль для <input />, например, он потеряет свои эффекты при наведении, градиенты и другие вещи.

Answer 5

http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

Answer 6

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}

Answer 7

Вы можете использовать свойство CSS 3 border-radius, которое будет работать в Firefox и Safari:

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}