7
¿Cómo puedo crear el siguiente estilo de HTML/CSS (esquinas redondeadas, básico background-color) resaltado en el cuadro rojo:Cómo crear fondo css div/esquinas redondeadas?
A
Respuesta
18
Utilice la propiedad border-radius CSS para crear bordes redondeados:
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
Puede omitir los prefijos, porque Firefox 3.6 o los viejos navegadores webkit están casi extintos.
Aunque es posible obtener esquinas redondeadas en OldIE (IE8-) usando divs + images o PIE.htc, recomiendo que no: PIE no es muy confiable, y agregar varios hacks HTML solo para hacer que algo funcione en el viejo IE es un desperdicio.
Véase también: MDN: border-radius.
Cuestiones relacionadas
- 1. IE9 Esquinas redondeadas y degradados de fondo CSS ¿Vivir juntos?
- 2. CSS esquinas redondeadas Divs
- 3. CSS esquinas redondeadas
- 4. flechas redondeadas con CSS
- 5. ¿Cómo puedo hacer esquinas redondeadas div con fondo transparente?
- 6. Crear botón con esquinas redondeadas en Android
- 7. Repetición de fondo limitada de CSS (varias imágenes de fondo)
- 8. Cómo crear una imagen con esquinas redondeadas en C#?
- 9. ¿Cómo agregar esquinas redondeadas al fondo translúcido de actividad?
- 10. Esquinas redondeadas en un diseño de celda de tabla css?
- 11. Agregue una imagen de fondo a JPanel con esquinas redondeadas
- 12. ¿Crear imagen de fondo CSS que se superpone al borde?
- 13. Posible crear una sombra css sobre fondo transparente Imagen PNG?
- 14. HTML y CSS fondo
- 15. Cómo crear esquinas redondeadas en Table Head solamente
- 16. CSS: Crear fondos texturizados
- 17. UILabel con esquinas redondeadas, sombra paralela y patrón de fondo
- 18. Esquinas redondeadas usando ImageMagick (fondo transparente o blanco)
- 19. CSS validación fondo degradado
- 20. SVG como fondo CSS
- 21. CSS esquinas redondeadas en un problema de imagen
- 22. Cómo hacer un fondo circular usando css?
- 23. ¿Solo dos esquinas redondeadas?
- 24. css botón fondo de la pendiente
- 25. ¿Es posible tener CSS con esquinas redondeadas en un iframe?
- 26. Esquinas redondeadas en UITableView
- 27. Opacidad de gradiente CSS (no fondo)
- 28. Imágenes de fondo CSS en MVC3
- 29. jQuery .css Fondo no-repeat
- 30. css dos imágenes de fondo
Realísticamente, solo necesita 'border-radius: 5px'. Las versiones actuales de todos los navegadores compatibles con 'border-radius' lo admiten sin el prefijo del proveedor, y lo han hecho por un tiempo. – thirtydot
En FireFox 3.6, que todavía se usa ampliamente, el prefijo '-moz-' sigue siendo necesario. Muchos usuarios no tienen la última versión del navegador. –
Tiene razón sobre '-moz-', no pensé con cuidado. – thirtydot