come faccio angoli arrotondati in CSS in Google Chrome

Question

Fondamentalmente sto cercando di capire come lo faccio angoli arrotondati su un DIV in CSS che renderà in Google Chrome

Answer 1

Google Chrome (e Safari) lavorare con il seguenti CSS 3 prefissi

-webkit-border-radius: 10px; 

per tutti gli angoli a 10px

-webkit-border-top-left-radius: 8px; 
-webkit-border-bottom-left-radius: 8px; 

per in alto a sinistra e in basso a sinistra alla 8px

Per Firefox è possibile utilizzare:

-moz-border-radius: 10px; 

per tutti gli angoli e

-moz-border-radius-topleft: 8px; 
-moz-border-radius-bottomleft: 8px; 

per l'angolo in alto a sinistra e in basso a sinistra

Answer 2

a coprire sia Chrome, FF e qualsiasi browser che supporti CSS 3:

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} 

Answer 3

È futuro-utile per codificare il tuo c ss come questo:

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

questo modo, quando IE9/IE10 esce il vostro codice sarà anche funzionare anche lì: D

Answer 4

Si, pero 'l'unico problema di questo è che in realtà si sta gettando errori css perché di IE che è in jack e Microshaft non vuole fare nulla al riguardo, la correzione che uso è basata su js ma immagino che la maggior parte della gente ne sappia tutto. Ma, la ragione per cui lo uso è perché funziona sempre per me e su tutti i principali browser. Ecco qui.

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"; 

} 

Answer 5

Dato che tutti i browser ora supportano il raggio di confine senza prefissi; vedi: http://caniuse.com/#search=border-radius la sintassi corretta da utilizzare oggi è semplicemente:

border-radius: 5px;