みこむらめもむらむらむら

なんかHTML5とかJS勉強とかやりながらめもを綴るブログ

【Android】角丸border-radiusが効かない

Androidで角丸に指定したはずなのに効かないんですけどってことが
どうやらOS1.6で再現するみたい

いくつかごにょごにょしたら何とかなったのでめも

全部角丸にする場合

【NG】

border-radius:10px 10px 10px 10px;

【OK】

border-radius:10px;

ショートハンドで数値を複数入れるとダメみたい
なんでだろー

なんか省略したら効かないみたいなことを小耳にはさんでいたから
まずはじめに私が書いたのが

border-radius:10px 10px 10px 10px;

だった結果全部角がとがる

ショーハンドで書いている時点で省略だバカヤローってなったわけで
折角だしと思ってためしに数値一個にしたらいけますたふむー

それでは今度は上の角2つだけ角丸にする場合

【NG】

border-radius:10px 10px 0 0;

【OK】

border-top-left-radius:10px;
border-top-right-radius:10px;

ショートハンドはやっぱりあかん
ということでめんどくさいけど全部書かなきゃならないみたい

そういえばこれも気を付けないと

要素の高さ以上のradius値を指定すると角丸が効かない
これはOS1.6だけなのか否かちょっとわからないけれど
手元のOS1.6ではアウトだったのでめも

おまけで自分のためにめもですが

border-radius指定するときに私がハックで入れているのは

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

この2つ

で、border-top-left-radius:10px;これを書くときは

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

なんてことないけどたまに混乱するおバカなので念のため