{{#markdown}}
Usage: **.br[direction][size]**.<br />
Example: **.brtlm** (applies a medium-sized border radius to the top-left corner of the element).
{{/markdown}}

<table class="table table-text table-hover">
      <thead>
        <tr>
          <th>Value</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code class=" language-css">[direction]</code></td>
          <td>The side or corner on which to apply the border radius. Values can be all (<code class=" language-css">a</code>), top left (<code class=" language-css">tl</code>), top right (<code class=" language-css">tr</code>), bottom right (<code class=" language-css">br</code>), bottom left (<code class=" language-css">bl</code>), top (<code class=" language-css">t</code>), left (<code class=" language-css">l</code>), bottom (<code class=" language-css">b</code>), or right (<code class=" language-css">r</code>).</td>
        </tr>
        <tr>
          <td><code class=" language-css">[size]</code></td>
          <td>One of 3 sizes, defined in the <a target="_blank" href="https://github.com/viadeo/tetra-ui/blob/gh-pages/src/less/foundation/variables.less#L121-L126">variables.less</a> file. Values can be small (<code class=" language-css">s</code>), medium (<code class=" language-css">m</code>), or large(<code class=" language-css">l</code>).</td>
        </tr>
      </tbody>
    </table>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<!-- The id attribute describes the class value-->
<div id="border-radius-all-medium" class="bram"> ... </div>
<div id="border-radius-top-left-small" class="brtls"> ... </div>
<div id="border-radius-bottom-medium" class="brbm"> ... </div>
```
{{/markdown}}

{{> copy-code}}
</div>