En esta entrada os voy a poner un ejemplo de como generar un contenedor para nuestra web con los bordes redondeados, realmente en algunos navegadores como Firefox esta opcion se puede hacer por css directamente, pero para otros como IE no es posible por lo que necesitamos un codigo especial.
El ejemplo lo podeis ver en este enlace “Ejemplo Bordes Redondeados”
El codigo que hemos generado para conseguir esto es el siguiente:
HTML
<html lang="es">
<head>
<title>contenedor borde redondeado por css</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body >
<div class="contenedorBordes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mi non nisi dapibus tincidunt nec ac felis. Etiam interdum tortor dapibus ultricies sagittis. Praesent pretium dignissim sapien vitae aliquet. Nullam pulvinar consequat lorem sit amet blandit. Nulla facilisi. Duis auctor pulvinar purus sit amet blandit. Donec molestie tristique purus vel pellentesque. Donec auctor eros consectetur, convallis libero ut, vestibulum purus. Donec aliquet diam vitae nibh tristique volutpat. Maecenas ullamcorper justo odio, eu tempus ligula vulputate eu. Vestibulum commodo ante fringilla pretium posuere. </p>
<p>Cras ornare urna dui, nec luctus lorem viverra a. Donec ullamcorper, magna eu elementum blandit, lacus nibh auctor neque, consequat rhoncus lacus felis ac nibh. Integer leo arcu, venenatis ultricies eleifend in, pretium vitae tortor. Vivamus mollis nulla condimentum odio vestibulum, ac tincidunt enim molestie. Integer eros justo, placerat eu convallis vel, sollicitudin ut orci. Curabitur lectus dolor, tempor in commodo ullamcorper, dapibus et tortor. Mauris et erat dapibus, gravida dui feugiat, vehicula velit. Proin blandit purus eu purus eleifend tincidunt. Donec non convallis nisi. </p>
</div>
</body>
</html> |
CSS style.css
body{ background:grey; } .contenedorBordes { float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ width: 923px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ background:#ebebeb; border:4px solid #fff; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; color:#000; padding:8px 8px 0px 8px; margin:0px 0px 0px 5px; } .contenedorBordes p{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#6f6e6e; padding:0px 0px 8px 0px; margin:0px; text-align:justify; line-height:14px; } .contenedorBordes p span{ color:#55524e; } |
CSS ie.css (esta css solo se ejecuta cuando el explorador es IE y menor de IE9)
.contenedorBordes{behavior: url(css/PIE.htc); position:relative;} |
Y el archivo que realiza el redondeo que tiene codigo encriptado y se llama en el css ie.css, se llama PIE.htc, os dejo el enlace para que lo descargueis o lo veais.
Con este sencillo codigo y este archivo tendreis unos contenedores con los bordes perfectamente redondeados.