Crear esquinas redondeadas usando CSS [cerrado]

253

¿Cómo puedo crear esquinas redondeadas con CSS?

Eldila
fuente
Aquí hay un buen video sobre cómo hacer esquinas redondeadas usando solo CSS: < sampsonvideos.com/video.php?video=12 >
Stan
Artículo sobre técnicas de esquinas redondeadas de la red de desarrolladores de Yahoo, de 2007. Y una forma de agregar esquinas redondeadas (que requieren imágenes) a un panel YUI l.
Simon_Weaver
3
Más de 200 me gusta dice que ES constructivo.
SteveCav
1
Creo que esta es una pregunta canónica valiosa que merece ser reabierta, especialmente porque ahora es una wiki comunitaria.
DavidRR
Excepto que es información que se puede encontrar trivialmente en muchos, muchos otros lugares en la web. No es necesario que SO duplique los recursos existentes.
Jim Garrison

Respuestas:

102

Desde que se introdujo CSS3, la mejor manera de agregar esquinas redondeadas mediante CSS es mediante la border-radiuspropiedad. Puede leer las especificaciones de la propiedad u obtener información de implementación útil en MDN :

Si está utilizando un navegador que no implementa border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), los enlaces a continuación detallan un montón de enfoques diferentes. Encuentre uno que se adapte a su sitio y estilo de codificación, y vaya con él.

  1. Diseño CSS: creación de esquinas y bordes personalizados
  2. Resumen de esquinas redondeadas de CSS
  3. 25 técnicas de esquinas redondeadas con CSS
Yaakov Ellis
fuente
1
Me parece que DD_roundies es la solución perfecta
vsync el
1
@vsync pero no está bien soportado en IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers
Jitendra Vyas
55
enlace útil si decide utilizar CSS3 (como SO) border-radius.com (otra referencia css3.info/border-radius-apple-vs-mozilla )
mickthompson
el tercer enlace no funciona cssjuice.com/25-itated-corners-techniques-with-css
Krishna
80

Observé esto desde el principio en la creación de Stack Overflow y no pude encontrar ningún método para crear esquinas redondeadas que no me dejara sentir como si acabara de caminar por una alcantarilla.

CSS3 finalmente define el

border-radius:

Que es exactamente como quieres que funcione. Aunque esto funciona bien en las últimas versiones de Safari y Firefox, pero en absoluto en IE7 (y no creo en IE8) u Opera.

Mientras tanto, son hacks hasta el fondo. Estoy interesado en escuchar lo que otras personas piensan que es la forma más limpia de hacer esto en IE7, FF2 / 3, Safari3 y Opera 9.5 en este momento.

Jeff Atwood
fuente
55
"... caminó por una alcantarilla?" Eso es un poco duro, Jeff. La respuesta es, depende." ¿Cuadros de un solo color, degradado o sombreados? ¿Necesitan expandirse verticalmente, horizontalmente o ambos? Diferentes soluciones para diferentes requisitos. Cuanto más exigente sea el requisito, más parecido al alcantarillado será la solución.
Carl Camera
28
Preferiría usar este método. Si un navegador no lo admite, ¿a quién le importa?
Sam Murray-Sutton
11
Twitter degrada la función de esquina redondeada a esquinas puntiagudas en su sitio web para usuarios de IE. No es un gran problema en realidad.
Lance Fisher
55
Definitivamente usaría este enfoque: manejemos las cosas como están. Si alguien no usa un navegador (es decir, IE), merece ver las esquinas redondeadas como angulares. :)
thSoft
1
Quiero rechazar esta respuesta, porque no describe lo que el respondedor (Jeff) piensa que es la mejor manera.
allyourcode
27

Generalmente obtengo esquinas redondeadas solo con css, si el navegador no es compatible, ven el contenido con esquinas planas. Si las esquinas redondeadas no son tan importantes para su sitio, puede usar estas líneas a continuación.

Si desea utilizar todas las esquinas con el mismo radio, esta es la manera fácil:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

pero si quieres controlar cada rincón, esto es bueno:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Como puede ver en cada conjunto, tiene estilos específicos del navegador y en la cuarta fila declaramos de manera estándar, asumimos si en el futuro los demás (con suerte, IE también) deciden implementar la función para que nuestro estilo esté listo para ellos también.

Como se dijo en otras respuestas, esto funciona maravillosamente en Firefox, Safari, Camino, Chrome.

Sinan
fuente
16

Si está interesado en crear esquinas en IE, esto puede ser útil: http://css3pie.com/

Oledor
fuente
esto funcionó completamente para mí, junto con la definición de las esquinas -moz, etc., etc. para otros navegadores.
bharal
13

Recomendaría usar imágenes de fondo. Las otras formas no son tan buenas: no hay suavizado ni marcas sin sentido. Este no es el lugar para usar JavaScript.

Lance Fisher
fuente
1
JavaScript definitivamente tiene el mayor alcance para fallas y parpadeo en mi experiencia. todos los plugins jQuery que he probado tienen algún tipo de efectos secundarios inesperados
Simon_Weaver
CurvyCorners ( curvycorners.net ) y ShadedBorder ( ruzee.com/blog/shadedborder ) no logran apoyar anti-aliasing. También hay formas de utilizar estas marcas adicionales, puede implementarlas con una clase y luego las marcas se agregan dinámicamente a los elementos clasificados. Dicho esto, cuanto más los uso, más parece correcto ... son útiles para la creación de prototipos, pero agregan mucho peso extra al DOM. Ahora que tengo los míos ajustados de la manera que quiero, planeo convertirlos en imágenes.
Ben Regenspan
1
Esta respuesta no contiene suficientes detalles para que alguien implemente lo que el respondedor está pensando.
allyourcode
11

Como dijo Brajeshwar: Usando el border-radiusselector css3. Por ahora, puede aplicar -moz-border-radiusy -webkit-border-radiuspara los navegadores basados ​​en Mozilla y Webkit, respectivamente.

Entonces, ¿qué pasa con Internet Explorer? Microsoft tiene muchos comportamientos para hacer que Internet Explorer tenga algunas características adicionales y obtenga más habilidades.

Aquí: un .htcarchivo de comportamiento para obtener round-cornersdel border-radiusvalor en su CSS. Por ejemplo.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Por supuesto, el selector de comportamiento no es un selector válido, pero puede colocarlo en un archivo CSS diferente con comentarios condicionales (solo para IE).

El comportamiento del archivo HTC

juanpablob
fuente
44
Nunca entendí por qué tantos se preocupan por la validación CSS. no importa nada, solo importa la validación DOM.
vsync el
Este parece ser el camino a seguir.
Matthew Olenik
3
¿Puedes agregar una breve explicación de lo que es un archivo de comportamiento? Creo que la persona que busca una respuesta a esta pregunta probablemente no esté familiarizada con ellas.
allyourcode
2
Parece que el enlace del archivo de comportamiento está muerto
evanmcd
9

Con el soporte para CSS3 implementado en versiones más recientes de Firefox, Safari y Chrome, también será útil mirar "Border Radius".

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

Al igual que cualquier otra taquigrafía CSS, lo anterior también se puede escribir en formato expandido y, por lo tanto, lograr un radio de borde diferente para el topleft, topright, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;
Brajeshwar
fuente
1
Su sintaxis para -webkit-border-bottom-rightright-radius: 3px; y -webkit-border-top-rightright-radio: 10px; debería leer -webkit-border-bottom-right-radius: 3px y -webkit-border-top-right-radius: 10px;
Wolfr
8

jQuery es la forma en que trataría esto personalmente. El soporte de CSS es mínimo, las imágenes son demasiado complicadas, para poder seleccionar los elementos que desea tener esquinas redondeadas en jQuery tiene mucho sentido para mí, aunque algunos sin duda argumentarán lo contrario. Hay un complemento que utilicé recientemente para un proyecto en el trabajo aquí: http://plugins.jquery.com/project/jquery-roundcorners-canvas

mcaulay
fuente
@mcaulay: ¿también es compatible con dar sombra a la caja?
nickytonline 03 de
jquery roundcorners no es compatible con IE 8.
evanmcd
6

Siempre existe la forma de JavaScript (ver otras respuestas), pero dado que es puramente de estilo, estoy en contra de usar scripts de clientes para lograr esto.

La forma que prefiero (aunque tiene sus límites) es usar 4 imágenes de esquinas redondeadas que colocará en las 4 esquinas de su caja usando CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Como se mencionó, tiene sus límites (el fondo detrás del cuadro redondeado debe ser simple, de lo contrario las esquinas no coincidirán con el fondo), pero funciona muy bien para cualquier otra cosa.


Actualizado: se mejoró la implementación mediante el uso de una hoja de sprites.

mbillard
fuente
Todo se puede simplificar usando sprites CSS, tal vez actualice mi respuesta.
mbillard
Allí, actualicé el código para usar una hoja de sprites.
mbillard
5

En Safari, Chrome, Firefox> 2, IE> 8 y Konquerer (y probablemente otros) puede hacerlo en CSS utilizando la border-radiuspropiedad. Como todavía no es oficialmente parte de la especificación, utilice un prefijo específico del proveedor ...

Ejemplo

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Las soluciones de JavaScript generalmente agregan un montón de pequeños divs para que se vea redondeado, o usan bordes y márgenes negativos para hacer esquinas con muescas de 1px. Algunos también pueden utilizar SVG en IE.

En mi opinión, la forma CSS es mejor, ya que es fácil y se degradará con gracia en los navegadores que no lo admiten. Por supuesto, este es solo el caso en el que el cliente no los aplica en navegadores no compatibles, como IE <9.

alex
fuente
5

Aquí hay una solución HTML / js / css que hice recientemente. Hay un error de redondeo de 1px con posicionamiento absoluto en IE, por lo que desea que el contenedor tenga un número par de píxeles de ancho, pero está bastante limpio.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

La imagen tiene solo 18 píxeles de ancho y tiene las 4 esquinas juntas. Parece un circulo.

Nota: no necesita el segundo contenedor interno, pero me gusta usar el margen en el contenedor interno para que los márgenes en los párrafos y encabezados sigan manteniendo el colapso del margen. También puede omitir el jquery y simplemente colocar el contenedor interno en el html.

Jethro Larson
fuente
3

Como una indicación de lo complejo que es hacer funcionar las esquinas redondeadas, ¡incluso Yahoo los desalienta (ver primer punto con viñetas)! De acuerdo, solo están hablando de esquinas redondeadas de 1 píxel en ese artículo, pero es interesante ver que incluso una empresa con su experiencia ha concluido que son demasiado dolorosas para que trabajen la mayor parte del tiempo.

Si su diseño puede sobrevivir sin ellos, esa es la solución más fácil.

Simon_Weaver
fuente
Quiero encontrar la parte de la página YUI de la que estás hablando, pero ninguno de los puntos que he visto dice que tratar de obtener esquinas redondeadas es una mala idea. ¿Puedes ser mas específico? Encontré una parte que analiza las conversaciones sobre cómo debe establecer sus anchos de manera diferente cuando usa esquinas redondeadas, pero no lo desalienta.
allyourcode
@allyourcode: tampoco lo veo más. Recuerdo haber hecho esta publicación, pero no exactamente lo que dijeron. Sin embargo, parece que en el segundo enlace anterior mencionan la eliminación del soporte de IE para las esquinas redondeadas de 1 px ¡Pero en cualquier caso, esta publicación fue un poco irónica ya que solo hablan de esquinas de 1px, lo que creo que es una tremenda pérdida de tiempo! Recuerdo que cuando escribí esto estaba frustrado en general con las esquinas redondeadas, y me
decidí por las
2

Claro, si es un ancho fijo, es muy fácil usar CSS y no es ofensivo o laborioso. Es cuando necesitas escalar en ambas direcciones que las cosas se ponen entrecortadas. Algunas de las soluciones tienen una cantidad asombrosa de divs apilados uno encima del otro para que esto suceda.

Mi solución es dictarle al diseñador que si quiere usar esquinas redondeadas (por el momento), debe ser un ancho fijo. A los diseñadores les encantan las esquinas redondeadas (yo también), por lo que considero que esto es un compromiso razonable.

CarmineSantini
fuente
2

Ruzee Borders es la única solución de esquina redondeada suavizada basada en Javascript que he encontrado que funciona en todos los principales navegadores (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), y TAMBIÉN la única que funciona cuando Tanto el elemento redondeado como el elemento padre contienen una imagen de fondo. También hace bordes, sombras y brillo.

El nuevo RUZEE.ShadedBorder es otra opción, pero carece de soporte para obtener información de estilo de CSS.

Nathan Chase
fuente
1

Si va a utilizar la solución border-radius, existe este increíble sitio web para generar el CSS que lo hará funcionar para safari / chrome / FF.

De todos modos, creo que su diseño no debería depender de la esquina redondeada, y si mira Twitter, simplemente dicen F **** a los usuarios de IE y opera. Es bueno tener esquinas redondeadas, y personalmente estoy de acuerdo en mantener esto para los usuarios geniales que no usan IE :).

Ahora, por supuesto, no es la opinión de los clientes. Aquí está el enlace: http://border-radius.com/

Stéphane
fuente
1

No hay "la mejor" forma; Hay maneras que funcionan para usted y otras que no. Dicho esto, publiqué un artículo sobre la creación de una técnica de esquina redonda fluida basada en CSS + Imagen aquí:

Caja con esquinas redondeadas con CSS e imágenes - Parte 2

Una visión general de este truco es que utiliza DIV anidados y la repetición y el posicionamiento de la imagen de fondo. Para diseños de ancho fijo (altura estirable de ancho fijo), necesitará tres DIV y tres imágenes. Para un diseño de ancho fluido (ancho y alto extensibles) necesitará nueve DIV y nueve imágenes. Algunos podrían considerarlo demasiado complicado, pero en mi humilde opinión, es la solución más perfecta. Sin hacks, sin JavaScript.

Salman A
fuente
0

Escribí un artículo de blog sobre esto hace un tiempo, así que para más información, vea aquí

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Funciona bastante bien No se necesita Javascript, solo CSS y HTML. Con HTML mínimo interfiriendo con las otras cosas. Es muy similar a lo que Mono publicó, pero no contiene ningún hackeo específico de IE 6, y después de verificar, no parece funcionar en absoluto. Además, otro truco es hacer que la parte interior de cada imagen de la esquina sea transparente para que no bloquee el texto que está cerca de la esquina. La parte exterior no debe ser transparente, por lo que puede cubrir el borde del div no redondeado.

Además, una vez que CSS3 sea ampliamente compatible con radio de borde, esa será la mejor forma oficial de hacer esquinas redondeadas.

Kibbee
fuente
0

No use CSS, jQuery se ha mencionado varias veces. Si necesita un control total del fondo y el borde de sus elementos, pruebe jQuery Background Canvas Plugin . Coloca un elemento HTML5 Canvas en el fondo y le permite dibujar cada fondo o borde que desee. Esquinas redondeadas, gradientes, etc.

Thomas Maierhofer
fuente