角丸 curvycorners.js

css javascript

javascript + css で実現可能な
CurvyCorners - Beautiful rounded corners for your HTML boxesを試してみた。

install

ダウンロードして curvycorners.js を
public/javascripts以下に格納。

設定

javascriptを読み込み、
該当divにrounded　をclass指定し、
cssに下記を追加（background-colorも）するだけ。

#layout
  <%= javascript_include_tag('curvycorners.js') %>

#css
.rounded {
  -moz-border-radius:3ex;
  -webkit-border-radius:3ex;
}

こんな感じ


めちゃくちゃ簡単。