TOP

border-radiusで遊んでみた

border-radiusで遊んでみた

みなさん、お疲れ様です。

今回のネタはCSS3のプロパティ、border-radiusです。
border-radiusといえばご存じ角丸にするプロパティ。ボタンをつくるときなんかに役立ちますよね。

 

角丸サンプル

ちなみにwidth,height同じで値を50%にすると円になりますね。

円サンプル

そんなborder-radiusについて、こんな記事を見つけまして。
[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック(colissさん)

border-radiusでこんなことが!!
これはおもしろいですね。デザインの幅も広がるというものですよ。

というわけでborder-radiusを使ってお絵かきして遊んでみました。
その結果がこちら↓

えっ?これは何かって?
もちろん『さつまいも』ですよ。実用性なくてすみません。

今回はここまでです。もう少し実用性のあるいい感じのものを見つけたいですね。
でも、値を変えることでどう変化するかの勉強にはなったので良しとしましょう。
それでは。