compass 部分的に角丸(border-radius)りたい。

f:id:kikiki-kiki:20150302141255p:plain
compassで角丸(border-radius)にしたい時は

@include border-radius(5px);

みたいな感じでできますが、右上だけ角丸にしたいんじゃー！みたいな時の書き方をしょっちゅう忘れるのでメモ。

top・bottom / left・right で指定

@include border-corner-radius($vert, $horz, $radius);

$vert: top, bottom
$horz: left, right

左上 (top left) だけ角丸。

@include border-top-left-radius($radius);

右上 (top right) だけ角丸。

@include border-top-right-radius($radius);

左下 (bottom left) だけ角丸。

@include border-bottom-left-radius($radius);

右下 (bottom right) だけ角丸。

@include border-bottom-right-radius($radius);

上側 (top left & top right) を角丸。

@include border-top-radius($radius);

下側 (bottom left & bottom right) を角丸。

@include border-bottom-radius($radius);

右側 (top right & bottom right) を角丸。

@include border-right-radius($radius);

左側 (top left & bottom left) を角丸。

@include border-left-radius($radius);

関係ないのだけれど、僕は日本語で「右」「左」って言われた時にパッとどちらか分からないことが多いです。一瞬考えてあぁ！って分かる感じ。車とか乗ると事故りそう... cssのleftとかrightとかだと迷わないのですが。何なんでしょうね？ (お箸どちらの手でも持つから!?)
f:id:kikiki-kiki:20150302141444p:plain