Básicamente estoy tratando de averiguar cómo hacer esquinas redondeadas en un DIV en CSS que hará que en Google Chrome¿cómo lo hago esquinas redondeadas en el CSS en Google Chrome
Respuesta
Google Chrome (y Safari) trabajar con el CSS 3 siguientes prefijos
-webkit-border-radius: 10px;
para todas las esquinas en 10px
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
de la esquina superior izquierda e inferior izquierda en 8 píxeles
Para Firefox que puede utilizar:
-moz-border-radius: 10px;
para todas las esquinas y
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
para la esquina superior izquierda e inferior izquierda
Para cubrir tanto Chrome, FF y cualquier navegador que soporte CSS 3:
{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
+1 para futuras pruebas con 'border-radius' – peirix
En el futuro es útil codificar su c ss así:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
esta manera, cuando IE9/IE10 salga de su repertorio son también trabajar allí también: D
Sí, pero el único problema con esto es que en realidad se está lanzando errores css porque de IE siendo jacked y de que Microshaft no quiere hacer nada al respecto, la solución que uso está basada en js, pero me imagino que la mayoría de la gente lo sabe todo. Pero, la razón por la que lo uso es porque siempre funciona para mí y para todos los principales navegadores. Aqui tienes.
var obj= document.getElementById('divName');
var browserName=navigator.appName;
var browserVer=parseInt(navigator.appVersion);
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
obj.style.MozBorderRadius = "15px";
obj.style.WebkitBorderRadius= "15px";
}
Dado que todos los navegadores ahora admiten border-radius sin prefijos; ver: http://caniuse.com/#search=border-radius la sintaxis correcta a usar hoy es simplemente:
border-radius: 5px;
- 1. CSS esquinas redondeadas
- 2. CSS esquinas redondeadas Divs
- 3. Cómo crear fondo css div/esquinas redondeadas?
- 4. ¿Cómo hago las esquinas redondeadas solo en la parte superior del borde en css?
- 5. Esquinas redondeadas en un fieldset
- 6. Esquinas redondeadas en UITableView
- 7. Esquinas redondeadas en UIImage
- 8. esquinas redondeadas en las imágenes
- 9. Esquinas redondeadas en un diseño de celda de tabla css?
- 10. Esquinas redondeadas en XSL-FO
- 11. CSS esquinas redondeadas en un problema de imagen
- 12. ¿Es posible tener CSS con esquinas redondeadas en un iframe?
- 13. ¿Solo dos esquinas redondeadas?
- 14. Cuadros con esquinas redondeadas
- 15. Creación de esquinas redondeadas en IE7/IE8
- 16. UIImage esquinas redondeadas
- 17. Esquinas redondeadas de MKMapView
- 18. UIToolbar con esquinas redondeadas
- 19. NSImageView esquinas redondeadas + carrera
- 20. Esquinas redondeadas antialias en Android ImageView
- 21. QLineEdit Esquinas redondeadas?
- 22. Cómo crear una imagen con esquinas redondeadas en C#?
- 23. Configuración de esquinas redondeadas para svg: imagen
- 24. ¿Cómo corregir el conjunto de esquinas redondeadas en Android para diseño Relativo o de lo contrario?
- 25. IE9 Esquinas redondeadas y degradados de fondo CSS ¿Vivir juntos?
- 26. Imagebutton imagen completa, esquinas redondeadas
- 27. Crear botón con esquinas redondeadas en Android
- 28. XML Android esquinas redondeadas recortadas
- 29. Esquinas redondeadas UIView o UIImageView
- 30. Las esquinas redondeadas de la imagen CSS3 no funcionan en Safari/Chrome?
@Spasm i cree que lo tiene, pero sólo para ser claros frontera de radio es la clase CSS 3. El prefijo webkit es específicamente para Chrome y otros navegadores webkit. – dove
@dove - dado que Spasm no mencionó 'border-radius' sin los prefijos, ¿solo quiere señalar que algún día habrá un navegador distinto de Opera que admita esta regla de estilo sin el prefijo? – Anthony
@Anthony: con suerte los navegadores Webkit y Mozilla algún día dejarán caer el prefijo, y simplemente convertirán a los valores predeterminados, como se supone que deben hacerlo. Y si ya tienes 'border-radius' allí, entonces no tendrás que entrar y cambiar tu código ... – peirix