Scroll to Top

Border Radius

Border radius is divided in different classes for different positions and different styles.

SITEMAP Documentation / Css / Instant Helper Classes / Border Radius

If you want to give the whole element a border radius it will act on four sides of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radius-(2,5,10,15) 2px, 5px, 10px and 15px bottom, left, top, right

Example

radius-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radius-10 pad-20">radius-10</p>

If you want to give the top corner border radius it will act on two sides on the top of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusT-(2,5,10,15) 2px, 5px, 10px and 15px top, right, left

Example

radiusT-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusT-10 pad-20">radiusT-10</p>

If you want to give the bottom corner border radius it will act on two sides on the bottom of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusB-(2,5,10,15) 2px, 5px, 10px and 15px bottom, right, left

Example

radiusB-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusB-10 pad-20">radiusB-10</p>

If you want to give the left corner border radius it will act on two sides on the left of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusL-(2,5,10,15) 2px, 5px, 10px and 15px bottom, top, left

Example

radiusL-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusL-10 pad-20">radiusL-10</p>

If you want to give the Right corner border radius it will act on two sides on the right of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusR-(2,5,10,15) 2px, 5px, 10px and 15px bottom, top, right

Example

radiusR-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusR-10 pad-20">radiusR-10</p>

You can focus on one corner too, By using these classes you can focus on top left corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusTL-(2,5,10,15) 2px, 5px, 10px and 15px top, left

Example

radiusTL-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusTL-10 pad-20">radiusTL-10</p>

You can focus on one corner too, By using these classes you can focus on top right corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusTR-(2,5,10,15) 2px, 5px, 10px and 15px top, right

Example

radiusTR-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusTR-10 pad-20">radiusTR-10</p>

You can focus on one corner too, By using these classes you can focus on bottom left corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusBL-(2,5,10,15) 2px, 5px, 10px and 15px bottom, left

Example

radiusBL-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusBL-10 pad-20">radiusBL-10</p>

You can focus on one corner too, By using these classes you can focus on bottom right corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusBR-(2,5,10,15) 2px, 5px, 10px and 15px bottom, right

Example

radiusBR-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusBR-10 pad-20">radiusBR-10</p>

Feedback

Developed By Egrammi Studios