У меня были проблемы с использованием границы радиуса на наборах полей с легендой.Работает нормально со всеми браузерами, кроме IE.С IE углы не закруглены.Если я уберу легенду, углы поля будут закруглены.
Я нашел следующее исправление CSS, но оно кажется запутанным из-за необходимости использовать float и отрегулировать верхнее поле для легенды:
<style type="text/css" >
fieldset, legend {
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;
}
fieldset > legend {
float:left;
margin-top:-20px;
}
fieldset > legend + * {
clear:both;
}
</style>
Кто-нибудь знает что-нибудь "чище"альтернативы?
Кстати: я использую Bootstrap 4, если это имеет значение.
ДОБАВЛЕНО HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css" >
fieldset, legend {
border:1px solid #666;
border-radius:8px;
}
legend {
padding:2px 4px;
background:#fff;
}
fieldset > legend {
float:left;
margin-top:-20px;
}
fieldset > legend + * {
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>Legend</legend>
<br />
<p>Fieldset</p>
<p>Content</p>
<p>Stuff</p>
</fieldset>
</div>
</form>
</body>
</html>