diff --git a/package.json b/package.json
index b4faac03..38c7556d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 14cb1635..e2cecedc 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -20,19 +20,21 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { PopoverPlacement } from 'element-ui/types/popover'
 
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
 })
-export default class SButton extends Vue {
+export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly ButtonTypes = ButtonTypes
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
@@ -46,12 +48,6 @@ export default class SButton extends Vue {
    * By default it's set to `false`
    */
   @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
-  /**
-   * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Icon name from icon collection of this library
    */
@@ -105,14 +101,6 @@ export default class SButton extends Vue {
   private iconLeftOffset = 0
   elementIcon = ''
 
-  get computedSize (): string {
-    if (this.size === ButtonSize.BIG ||
-      !(Object.values(ButtonSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedType (): string {
     if (this.type === ButtonTypes.PRIMARY) {
       return this.type
@@ -124,9 +112,12 @@ export default class SButton extends Vue {
     const cssClasses: Array<string> = []
     if ((this.elForm || this.elFormItem || {}).size) {
       cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
-    } else if ((Object.values(ButtonSize) as Array<string>).includes(this.size)) {
+    } else if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
       cssClasses.push(`s-${this.type}`)
     }
diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index 4599450b..d11d2a08 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum ButtonTypes {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
@@ -13,5 +11,3 @@ export enum ButtonNativeTypes {
   SUBMIT = 'submit',
   RESET = 'reset'
 }
-
-export const ButtonSize = Size
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index f91e9931..53b5d0b7 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,5 @@
 import SButton from './SButton.vue'
 import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
-export { SButton, SButtonGroup, ButtonTypes, ButtonSize, ButtonNativeTypes }
+export { SButton, SButtonGroup, ButtonTypes, ButtonNativeTypes }
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index bf2ea598..81810fbc 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card
     class="s-card"
-    :class="{ 's-clickable': clickable }"
+    :class="computedClasses"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -12,12 +12,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { CardShadow } from './consts'
 
 @Component
-export default class SCard extends Vue {
+export default class SCard extends Mixins(BorderRadiusMixin) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -41,6 +42,17 @@ export default class SCard extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.clickable) {
+      cssClasses.push('s-clickable')
+    }
+    return cssClasses
+  }
+
   handleClick (): void {
     if (!this.clickable) {
       return
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index c2759c5c..6e25e862 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -16,12 +16,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { CheckboxSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SCheckbox extends Vue {
+export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of the checkbox item. Can be `string / number / boolean`
    */
@@ -48,12 +49,6 @@ export default class SCheckbox extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly checked!: boolean
-  /**
-   * Size of the checkbox item. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: CheckboxSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Native name property of the checkbox item
    */
@@ -77,19 +72,14 @@ export default class SCheckbox extends Vue {
     this.$emit('input', value)
   }
 
-  get computedSize (): string {
-    if (this.size === CheckboxSize.BIG ||
-      !(Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 
diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts
deleted file mode 100644
index f7d55fd0..00000000
--- a/src/components/Checkbox/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Size } from '../../types'
-
-export const CheckboxSize = Size
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 5f2acf9d..c30a6ad3 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,4 +1,3 @@
 import SCheckbox from './SCheckbox.vue'
-import { CheckboxSize } from './consts'
 
-export { SCheckbox, CheckboxSize }
+export { SCheckbox }
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 29862d5a..deb95519 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="s-date-picker" :class="computedClasses">
+  <div :class="computedClasses">
     <span v-if="willPlaceholderBeShown" class="s-placeholder">{{ placeholder }}</span>
     <el-date-picker
       ref="picker"
@@ -15,7 +15,7 @@
       :end-placeholder="endPlaceholder"
       :format="format"
       :align="align"
-      :popper-class="popperClass"
+      :popper-class="computedPopperClass"
       :picker-options="pickerOptions"
       :range-separator="rangeSeparator"
       :default-value="defaultValue"
@@ -35,12 +35,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
-import { PickerTypes, PickerSize, PickerAlignment, InputTypes } from './consts'
+// TODO: ask do we need size prop for the component?
+// Prev comment => TODO: ask design team
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 @Component
-export default class SDatePicker extends Vue {
+export default class SDatePicker extends Mixins(BorderRadiusMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.
    * Can be date object / array with date objects for date range picker
@@ -91,12 +94,6 @@ export default class SDatePicker extends Vue {
    * `true` by default
    */
   @Prop({ type: Boolean, default: true }) readonly clearable!: boolean
-  /**
-   * Size of the date picker input
-   * TODO: ask design team
-   * `"medium"` by default
-   */
-  // @Prop({ type: String, default: PickerSize.MEDIUM }) readonly size!: string
   /**
    * Placeholder in non-range mode
    */
@@ -209,11 +206,25 @@ export default class SDatePicker extends Vue {
     return !!(this.model && this.placeholder)
   }
 
-  get computedClasses (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = ['s-date-picker']
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
diff --git a/src/components/DatePicker/consts.ts b/src/components/DatePicker/consts.ts
index b28af7a3..a39cd70e 100644
--- a/src/components/DatePicker/consts.ts
+++ b/src/components/DatePicker/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum PickerTypes {
   YEAR = 'year',
   MONTH = 'month',
@@ -22,5 +20,3 @@ export enum InputTypes {
   INPUT = 'input',
   SELECT = 'select'
 }
-
-export const PickerSize = Size
diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index e100a2dc..9a55cca4 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,10 +1,9 @@
 import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes, PickerSize } from './consts'
+import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 export {
   SDatePicker,
   PickerTypes,
   PickerAlignment,
-  InputTypes,
-  PickerSize
+  InputTypes
 }
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index d2f1238e..ff094302 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -11,7 +11,7 @@
     :modal-append-to-body="modalAppendToBody"
     :append-to-body="appendToBody"
     :lock-scroll="lockScroll"
-    :custom-class="customClass"
+    :class="computedClasses"
     :close-on-click-modal="closeOnClickModal"
     :close-on-press-escape="closeOnEsc"
     :before-close="beforeClose"
@@ -28,11 +28,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import elementResizeDetectorMaker from 'element-resize-detector'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+
 @Component
-export default class SDialog extends Vue {
+export default class SDialog extends Mixins(BorderRadiusMixin) {
   /**
    * Visibility of the dialog component.
    *
@@ -148,6 +150,17 @@ export default class SDialog extends Vue {
     this.$emit('update:visible', value)
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.customClass) {
+      cssClasses.push(this.customClass)
+    }
+    return cssClasses
+  }
+
   mounted (): void {
     this.$nextTick(() => {
       const wrapper = (this.dialog || {}).$el as HTMLElement
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 679a9c9c..15ce5173 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -3,6 +3,7 @@
     ref="dropdown"
     :split-button="splitButton"
     :size="computedSize"
+    :class="computedClasses"
     :type="computedType"
     :placement="placement"
     :trigger="computedTrigger"
@@ -35,20 +36,22 @@
         </template>
       </s-tooltip>
     </template>
-    <el-dropdown-menu :class="{'ellipsis': type === DropdownType.ELLIPSIS}">
+    <el-dropdown-menu :class="computedPopperClass">
       <slot name="menu"></slot>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElDropdown } from 'element-ui/types/dropdown'
 
-import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { ButtonTypes, SButton } from '../Button'
 import { Icons, SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
+import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
 
 @Component({
   components: {
@@ -57,7 +60,7 @@ import { STooltip } from '../Tooltip'
     STooltip
   }
 })
-export default class SDropdown extends Vue {
+export default class SDropdown extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly DropdownType = DropdownType
   /**
    * A type of the dropdown component. Possible values: `"default"`, `"button"`, `"ellipsis"`.
@@ -78,13 +81,6 @@ export default class SDropdown extends Vue {
    * By default, it's set to `"secondary"`
    */
   @Prop({ type: String, default: ButtonTypes.SECONDARY }) readonly buttonType!: string
-  /**
-   * A size of the dropdown items. Possible values: `"big"`, `"medium"`, `"small"`.
-   * It affects on the button size if `type="button"` as well.
-   *
-   * By default, it's set to `"big"`
-   */
-  @Prop({ type: String, default: DropdownSize.BIG }) readonly size!: string
   /**
    * A placement of the popup menu. You can use any value from `DropdownPlacement` enum.
    *
@@ -133,6 +129,25 @@ export default class SDropdown extends Vue {
 
   willTooltipBeDisabled = false
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
+  get computedPopperClass (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.type === DropdownType.ELLIPSIS) {
+      cssClasses.push('ellipsis')
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedType () {
     if (this.type === DropdownType.BUTTON) {
       return this.computedButtonType
@@ -150,14 +165,6 @@ export default class SDropdown extends Vue {
     return this.trigger
   }
 
-  get computedSize (): string {
-    if (this.size === DropdownSize.BIG ||
-      !(Object.values(DropdownSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedButtonType (): string {
     if (this.buttonType === ButtonTypes.ACTION ||
       !(Object.values(ButtonTypes) as Array<string>).includes(this.buttonType)) {
diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts
index 8fd34a23..d9a6ec1e 100644
--- a/src/components/Dropdown/consts.ts
+++ b/src/components/Dropdown/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum DropdownType {
   DEFAULT = 'default',
   BUTTON = 'button',
@@ -19,5 +17,3 @@ export enum DropdownTrigger {
   HOVER = 'hover',
   CLICK = 'click'
 }
-
-export const DropdownSize = Size
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index 87bb2280..70b3392c 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,12 +1,11 @@
 import SDropdown from './SDropdown.vue'
 import SDropdownItem from './SDropdownItem.vue'
-import { DropdownPlacement, DropdownSize, DropdownTrigger, DropdownType } from './consts'
+import { DropdownPlacement, DropdownTrigger, DropdownType } from './consts'
 
 export {
   SDropdown,
   SDropdownItem,
   DropdownPlacement,
-  DropdownSize,
   DropdownTrigger,
   DropdownType
 }
diff --git a/src/components/Form/SForm.vue b/src/components/Form/SForm.vue
index b9ca19e3..fd269a9f 100644
--- a/src/components/Form/SForm.vue
+++ b/src/components/Form/SForm.vue
@@ -81,6 +81,7 @@ export default class SForm extends Vue {
   /**
    * Size of form items. Possible values: `"big"`, `"medium"`, `"small"`
    */
+  // TODO: play with Form size setting
   @Prop({ type: String }) readonly size!: string
   /**
    * Disabled form state. You can disable all form's elements using this property.
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 90a18bc1..d6e34373 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -73,7 +73,8 @@ export default class SFormItem extends Vue {
   /**
    * Size of form items. Possible values: `"big"`, `"medium"`, `"small"`
    */
-  @Prop({ type: String }) readonly size!: string // TODO: think about size for all items, not only for button
+  // TODO: think about size for all items, not only for button
+  @Prop({ type: String }) readonly size!: string
 
   @Ref('formItem') formItem!: ElFormItem
 
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 5ba34655..730dde91 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -23,7 +23,7 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
-      :prefix-icon="isMediumInput && prefix"
+      :prefix-icon="(isMediumInput && prefix) ? prefix : ''"
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
@@ -38,14 +38,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component
-export default class SInput extends Vue {
+export default class SInput extends Mixins(BorderRadiusMixin) {
   readonly InputType = InputType
   readonly emptyValue = null
   /**
@@ -181,6 +182,9 @@ export default class SInput extends Vue {
     if (this.disabled || (this.elForm || {}).disabled) {
       cssClasses.push('s-disabled')
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.type === InputType.TEXT_FILE) {
       cssClasses.push('s-text-file')
     }
diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue
index 41169236..fefd9b8a 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <el-menu
-    class="s-menu"
     ref="el-menu"
+    :class="computedClasses"
     :style="computedStyles"
     :mode="mode"
     :collapse="collapse"
@@ -24,13 +24,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElMenu } from 'element-ui/types/menu'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { MenuMode, MenuTrigger } from './consts'
 
 @Component
-export default class SMenu extends Vue {
+export default class SMenu extends Mixins(BorderRadiusMixin) {
   /**
    * Mode of menu. Possible values: `"horizontal"`, `"vertical"`.
    *
@@ -107,6 +108,14 @@ export default class SMenu extends Vue {
 
   @Ref('el-menu') elMenu!: ElMenu
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = ['s-menu']
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedStyles (): object {
     const styles = {} as any
     if (this.boxShadow) {
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 03f23c54..bb06f139 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -7,8 +7,9 @@
     :total="total"
     :small="small"
     :background="background"
+    :class="computedClasses"
     :current-page.sync="currentPageModel"
-    :popper-class="popperClass"
+    :popper-class="computedPopperClass"
     :prev-text="prevText"
     :next-text="nextText"
     :disabled="disabled"
@@ -23,12 +24,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import { ElPagination } from 'element-ui/types/pagination'
 import cloneDeep from 'lodash/fp/cloneDeep'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+
 @Component
-export default class SPagination extends Vue {
+export default class SPagination extends Mixins(BorderRadiusMixin) {
   /**
    * Will pagination component be small.
    *
@@ -167,6 +170,25 @@ export default class SPagination extends Vue {
     return this.layout.includes('slot')
   }
 
+  get computedPopperClass (): string {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   mounted (): void {
     this.initPaginationItems()
     this.renderPaginationItems()
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index d30b2246..ff62d7d5 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { RadioSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Vue {
+export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio component. Can be `string` / `number` / `boolean`
    */
@@ -56,12 +56,6 @@ export default class SRadio extends Vue {
    * Native name property
    */
   @Prop({ default: '', type: String }) readonly name!: string
-  /**
-   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
 
   model = this.value
 
@@ -78,7 +72,7 @@ export default class SRadio extends Vue {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(RadioSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
     return cssClasses
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
index 93382e17..36f0ace0 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group
     v-model="model"
-    :size="size"
+    :size="computedSize"
     :disabled="disabled"
   >
     <slot></slot>
@@ -9,22 +9,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { RadioSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Vue {
+export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio group. Can be `string` / `number` / `boolean`
    */
   @Prop() readonly value!: string | number | boolean
-  /**
-   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Whether the nesting radios are disabled.
    */
diff --git a/src/components/Radio/consts.ts b/src/components/Radio/consts.ts
deleted file mode 100644
index 63f35931..00000000
--- a/src/components/Radio/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Size } from '../../types'
-
-export const RadioSize = Size
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
index 9392d611..4448645d 100644
--- a/src/components/Radio/index.ts
+++ b/src/components/Radio/index.ts
@@ -1,5 +1,4 @@
 import SRadio from './SRadio.vue'
 import SRadioGroup from './SRadioGroup.vue'
-import { RadioSize } from './consts'
 
-export { SRadio, SRadioGroup, RadioSize }
+export { SRadio, SRadioGroup }
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 2a4e988f..c706e329 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -12,6 +12,7 @@
       :clearable="clearable"
       :multiple-limit="multipleLimit"
       :no-data-text="noDataText"
+      :popper-class="computedPopperClass"
       @blur="handleBlur"
       @focus="handleFocus"
       @visible-change="handleVisibleChange"
@@ -24,13 +25,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete } from '../Input'
 import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Vue {
+export default class SSelect extends Mixins(BorderRadiusMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -64,6 +66,10 @@ export default class SSelect extends Vue {
    * `"No data"` is set by default
    */
   @Prop({ type: String, default: 'No data' }) readonly noDataText!: string
+  /**
+   * Custom class name for the page size Select's dropdown
+   */
+  @Prop({ default: '', type: String }) readonly popperClass!: string
   /**
    * Name attribute for input
    */
@@ -137,11 +143,25 @@ export default class SSelect extends Vue {
     this.$nextTick(this.updateInputValue)
   }
 
+  get computedPopperClass (): string {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 48af7487..51cfa17a 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -20,12 +20,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TabsType, TabsPosition } from './consts'
 
 @Component
-export default class STabs extends Vue {
+export default class STabs extends Mixins(BorderRadiusMixin) {
   /**
    * Name of the selected tab. Can be used with `v-model`.
    *
@@ -99,6 +100,9 @@ export default class STabs extends Vue {
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index f59493f3..1f6410a2 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -6,7 +6,7 @@
     :max-height="maxHeight"
     :stripe="stripe"
     :border="border"
-    :size="size"
+    :size="computedSize"
     :fit="fit"
     :show-header="showHeader"
     :highlight-current-row="highlightCurrentRow"
@@ -58,15 +58,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
+import SizeMixin from '../../mixins/SizeMixin'
 import { TooltipTheme } from '../Tooltip'
-import { TableSize, SortDirection } from './consts'
+import { SortDirection } from './consts'
 
 @Component
-export default class STable extends Vue {
+export default class STable extends Mixins(SizeMixin) {
   /**
    * Data of the table.
    *
@@ -97,12 +98,6 @@ export default class STable extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
-  /**
-   * Table's size attribute.
-   *
-   * `"big"` by default
-   */
-  @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
   /**
    * Will width of column automatically be fit its container.
    *
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index bb5ff572..93104b42 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,3 @@
-import { Size } from '../../types'
 import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
@@ -23,5 +22,4 @@ export enum ColumnAlignment {
   RIGHT = 'right'
 }
 
-export const TableSize = Size
 export const ColumnFilterPlacement = TooltipPlacement
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 2a46f9ea..1c87173f 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,6 +1,6 @@
 import STable from './STable.vue'
 import STableColumn from './STableColumn.vue'
-import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection, TableSize } from './consts'
+import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection } from './consts'
 
 export {
   STable,
@@ -8,6 +8,5 @@ export {
   ColumnAlignment,
   ColumnFixedPosition,
   ColumnType,
-  SortDirection,
-  TableSize
+  SortDirection
 }
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 7d1ba338..48807ffc 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -11,6 +11,7 @@
     :transition="animation"
     :visible-arrow="showArrow"
     :open-delay="openDelay"
+    :popper-class="computedPopperClass"
     :manual="manual"
     :hide-after="closeDelay"
     :tabindex="tabindex"
@@ -21,15 +22,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
-export default class STooltip extends Vue {
+export default class STooltip extends Mixins(BorderRadiusMixin) {
   /**
    * Theme of the tooltip. Supported values: `"dark"` or `"light"`.
    *
@@ -80,6 +82,10 @@ export default class STooltip extends Vue {
    * `0` by default
    */
   @Prop({ default: 0, type: Number }) readonly openDelay!: number
+  /**
+   * Custom class name for tooltip's popper
+   */
+  @Prop({ type: String }) readonly popperClass!: string
   /**
    * Manual mode of the tooltip. `Mouseenter` and `mouseleave` won't have
    * effects if set to true.
@@ -102,6 +108,17 @@ export default class STooltip extends Vue {
 
   @Ref('tooltip') tooltip!: any
 
+  get computedPopperClass (): string {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
   model = this.value
 
   @Watch('value')
diff --git a/src/mixins/BorderRadiusMixin.ts b/src/mixins/BorderRadiusMixin.ts
new file mode 100644
index 00000000..8703a66e
--- /dev/null
+++ b/src/mixins/BorderRadiusMixin.ts
@@ -0,0 +1,16 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { BorderRadius } from '../types'
+
+@Component
+export default class BorderRadiusMixin extends Vue {
+  /**
+   * Border radius of component. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL }) borderRadius!: string
+
+  get isStandardBorderRadius (): boolean {
+    return (Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)
+  }
+}
diff --git a/src/mixins/SizeMixin.ts b/src/mixins/SizeMixin.ts
new file mode 100644
index 00000000..fdacc3a6
--- /dev/null
+++ b/src/mixins/SizeMixin.ts
@@ -0,0 +1,23 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Size } from '../types'
+
+@Component
+export default class SizeMixin extends Vue {
+  /**
+   * Size of component. Possible values: `"big"`, `"medium"`, `"small"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: Size.MEDIUM }) readonly size!: string
+
+  get isStandardSize (): boolean {
+    return (Object.values(Size) as Array<string>).includes(this.size)
+  }
+
+  get computedSize (): Size | string {
+    if (this.size === Size.BIG || !this.isStandardSize) {
+      return ''
+    }
+    return this.size
+  }
+}
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index a4ec4086..b01e3d03 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -1,7 +1,8 @@
 import { number, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCol, SDropdown, SDropdownItem, SRow } from '../../components'
-import { DropdownPlacement, DropdownSize, DropdownTrigger, DropdownType } from '../../components/Dropdown'
+import { Size, BorderRadius } from '../../types'
+import { DropdownPlacement, DropdownTrigger, DropdownType } from '../../components/Dropdown'
 import { ButtonTypes } from '../../components/Button'
 
 export default {
@@ -15,7 +16,8 @@ export const configurable = () => ({
   components: { SDropdown, SDropdownItem },
   template: `<s-dropdown
                type="button"
-               size="big"
+               :size="size"
+               :borderRadius="borderRadius"
                :buttonType="buttonType"
                :placement="placement"
                :hide-on-click="hideOnClick"
@@ -35,6 +37,12 @@ export const configurable = () => ({
     buttonType: {
       default: select('Button Type', Object.values(ButtonTypes), ButtonTypes.SECONDARY)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     placement: {
       default: select('Placement', Object.values(DropdownPlacement), DropdownPlacement.BOTTOM_END)
     },
@@ -126,7 +134,7 @@ export const differentTypes = () => ({
   }
 })
 
-export const differentSizeData = Object.values(DropdownSize).map(size => {
+export const differentSizeData = Object.values(Size).map(size => {
   const data = { size, type: DropdownType.BUTTON, buttonType: ButtonTypes.PRIMARY } as any
   data.label = size[0].toUpperCase() + size.slice(1)
   return data
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 17083f81..f74e9ce0 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors } from '../../types'
+import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius } from '../../types'
 import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
 import { differentTypeButtonsData } from '../SButton.stories'
 
@@ -10,6 +10,12 @@ export default {
   excludeStories: /.*Data$/
 }
 
+const borderRadiusPropertyPrefix = '--s-border-radius-'
+const getRadiusData = (BorderRadius) => Object.values(BorderRadius).map(borderRadiusPropertyName => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`${borderRadiusPropertyPrefix}${borderRadiusPropertyName}`)
+  return { label: borderRadiusPropertyName, value }
+})
+
 const colorPropertyPrefix = '--s-color-'
 const getColorsData = (colors) => Object.values(colors).map(colorPropertyName => {
   const value = getComputedStyle(document.documentElement).getPropertyValue(`${colorPropertyPrefix}${colorPropertyName}`)
@@ -70,6 +76,21 @@ export const configurable = () => ({
                </s-col>
              </s-row>
              <s-divider />
+             <s-row>
+               <h6 style="margin-bottom: 10px">Border Radius</h6>
+               <s-col class="s-flex" :span="12" style="justify-content: space-between;">
+               <div class="s-flex" v-for="button in borderRadiusButtons" :key="button.borderRadius">
+                  <s-input
+                    type="number"
+                    :placeholder="button.label + ' (px)'"
+                    :borderRadius="button.label"
+                    style="margin-right: 10px; margin-right: 10px;"
+                    @change="(value) => handleBorderRadiusChange(button.label, value)"
+                  />
+               </div>
+               </s-col>
+             </s-row>
+             <s-divider />
              <s-row :gutter="20">
                <s-col v-for="input in inputs" :key="input" :span="4">
                  <s-input :placeholder="input" :type="input" />
@@ -81,11 +102,15 @@ export const configurable = () => ({
   data: () => ({
     sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
+    borderRadiusButtons: getRadiusData(BorderRadius),
     inputs: themeInputsData
   }),
   methods: {
     handleColorChange: (label: string, color: string) => {
       document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color)
+    },
+    handleBorderRadiusChange: (label: string, borderRadius: string) => {
+      document.documentElement.style.setProperty(`${borderRadiusPropertyPrefix}${label}`, `${+borderRadius > 0 ? borderRadius : '0'}px`)
     }
   }
 })
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index e56016a9..246c197b 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -1,4 +1,6 @@
+import { select } from '@storybook/addon-knobs'
 import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../components'
+import { BorderRadius } from '../../types'
 
 export default {
   component: SMenu,
@@ -11,6 +13,7 @@ export const basicMenu = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="1"
+                 :borderRadius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -36,6 +39,11 @@ export const basicMenu = () => ({
                  </s-menu-item-group>
                </s-menu>
              </s-aside>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleOpen (key: string, keyPath: Array<string>): void {
       console.log('handleOpen', key, keyPath)
@@ -54,6 +62,7 @@ export const sideBar = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="2"
+                 :borderRadius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -89,6 +98,11 @@ export const sideBar = () => ({
                  </s-menu-item>
                </s-menu>
              </s-aside>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleOpen (key: string, keyPath: Array<string>): void {
       console.log('handleOpen', key, keyPath)
@@ -107,6 +121,7 @@ export const topBar = () => ({
   template: `<s-menu
                default-active="4"
                mode="horizontal"
+               :borderRadius="borderRadius"
                @select="handleSelect">
                <s-menu-item index="1">Navigator One</s-menu-item>
                <s-submenu index="2">
@@ -124,6 +139,11 @@ export const topBar = () => ({
                <s-menu-item index="3" disabled>Navigator Three</s-menu-item>
                <s-menu-item index="4">Navigator Four</s-menu-item>
              </s-menu>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleSelect (key: string, keyPath: Array<string>): void {
       console.log('handleSelect', key, keyPath)
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index 980a010e..011e73d1 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -1,7 +1,8 @@
 import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components'
-import { ButtonSize, ButtonTypes } from '../components/Button'
+import { Size, BorderRadius } from '../types'
+import { ButtonTypes } from '../components/Button'
 
 export default {
   component: SButton,
@@ -19,6 +20,7 @@ export const configurable = () => ({
                :icon="type === 'action' ? 'back' : ''"
                :type="type"
                :size="size"
+               :borderRadius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
@@ -36,7 +38,10 @@ export const configurable = () => ({
       default: select('Type', Object.values(ButtonTypes), ButtonTypes.PRIMARY)
     },
     size: {
-      default: select('Size', Object.values(ButtonSize), ButtonSize.BIG)
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
     },
     rounded: {
       default: boolean('Rounded', false)
@@ -84,7 +89,7 @@ export const withDifferentTypes = () => ({
   }
 })
 
-export const differentSizeData = Object.values(ButtonSize).map(size =>
+export const differentSizeData = Object.values(Size).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const withDifferentSize = () => ({
   components: { SButton, SRow },
@@ -104,6 +109,26 @@ export const withDifferentSize = () => ({
   }
 })
 
+export const differentBorderRadiusData = Object.values(BorderRadius).map(borderRadius =>
+  ({ borderRadius, label: borderRadius[0].toUpperCase() + borderRadius.slice(1) }))
+export const withDifferentBorderRadius = () => ({
+  components: { SButton, SRow },
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-button
+                 v-for="item in items"
+                 :key="item.borderRadius"
+                 :borderRadius="item.borderRadius"
+               >
+                 {{ item.label }}
+               </s-button>
+             </s-row>`,
+  props: {
+    items: {
+      default: () => differentBorderRadiusData
+    }
+  }
+})
+
 export const disabled = () => ({
   components: { SButton, SRow },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 5146bc9b..1150b755 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -1,6 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
+import { BorderRadius } from '../types'
 import { CardShadow } from '../components/Card'
 
 export default {
@@ -12,11 +13,11 @@ export default {
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card style="width: 80%;" :shadow="shadow" :clickable="clickable" @click="handleClick">
+               <s-card style="width: 80%;" :shadow="shadow" :borderRadius="borderRadius" :clickable="clickable" @click="handleClick">
                  <template slot="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
-                     <s-dropdown type="ellipsis">
+                     <s-dropdown type="ellipsis" :borderRadius="borderRadius">
                        Menu
                        <template #menu>
                          <s-dropdown-item>First</s-dropdown-item>
@@ -38,6 +39,9 @@ export const configurable = () => ({
     header: {
       default: text('Header', 'Card header')
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     clickable: {
       default: boolean('Clickable', false)
     }
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 517f77c1..b97569ce 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCheckbox, SRow, SCol } from '../components'
-import { CheckboxSize } from '../components/Checkbox'
+import { Size, BorderRadius } from '../types'
 
 export default {
   component: SCheckbox,
@@ -17,6 +17,7 @@ export const configurable = () => ({
                  v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
+                 :borderRadius="borderRadius"
                  :size="size"
                  :label="label"
                  @change="(value) => changeValue = value"
@@ -37,11 +38,14 @@ export const configurable = () => ({
     border: {
       default: boolean('Border', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
+    },
     label: {
       default: text('Label', 'Checkbox')
     },
     size: {
-      default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     }
   }
 })
@@ -66,7 +70,7 @@ export const disabled = () => ({
   })
 })
 
-export const differentSizeData = Object.values(CheckboxSize).map(size =>
+export const differentSizeData = Object.values(Size).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const differentSize = () => ({
   components: { SCheckbox, SRow, SCol },
@@ -87,4 +91,27 @@ export const differentSize = () => ({
   data: () => ({
     items: differentSizeData
   })
+}
+)
+export const differentBorderRadiusData = Object.values(BorderRadius).map(borderRadius =>
+  ({ borderRadius, label: borderRadius[0].toUpperCase() + borderRadius.slice(1) }))
+export const differentBorderRadius = () => ({
+  components: { SCheckbox, SRow, SCol },
+  template: `<s-row :gutter="20" style="flex: 1;">
+               <template v-for="item in items">
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox :borderRadius="item.borderRadius" :value="false">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox border :borderRadius="item.borderRadius" :value="true">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+               </template>
+             </s-row>`,
+  data: () => ({
+    items: differentBorderRadiusData
+  })
 })
diff --git a/src/stories/SDatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
index 428593f3..5afd3413 100644
--- a/src/stories/SDatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SDatePicker, SRow, SCol } from '../components'
+import { BorderRadius } from '../types'
 import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePicker'
 
 export default {
@@ -21,6 +22,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :clearable="clearable"
                  :align="align"
+                 :borderRadius="borderRadius"
+                 :popperClass="borderRadius"
                  :input-type="inputType"
                  placeholder="Select date"
                  start-placeholder="From"
@@ -60,6 +63,9 @@ export const configurable = () => ({
     },
     align: {
       default: select('Align', Object.values(PickerAlignment), PickerAlignment.LEFT)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
     }
   },
   methods: {
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index 9de70626..a56e4518 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, boolean } from '@storybook/addon-knobs'
+import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
 import { SDialog, SRow, SButton } from '../components'
+import { BorderRadius } from '../types'
 
 export default {
   component: SDialog,
@@ -22,6 +23,7 @@ export const configurable = () => ({
                  :width="width"
                  :fullscreen="fullscreen"
                  :top="top"
+                 :borderRadius="borderRadius"
                  :show-close="showClose"
                  :close-on-click-modal="closeOnClickModal"
                  :close-on-esc="closeOnEsc"
@@ -51,6 +53,9 @@ export const configurable = () => ({
     fullscreen: {
       default: boolean('fullscreen', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     showClose: {
       default: boolean('Show close', true)
     },
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 182d55e8..85381d27 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,6 +1,7 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
 import { SInput, SRow, SCol } from '../components'
+import { BorderRadius } from '../types'
 import { InputType, InputSize } from '../components/Input'
 
 export default {
@@ -17,6 +18,7 @@ export const configurable = () => ({
                :type="type"
                :placeholder="placeholder"
                :disabled="disabled"
+               :borderRadius="borderRadius"
                :show-password="showPassword"
                :readonly="readonly"
                :show-text-limit="showTextLimit"
@@ -47,6 +49,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
+    },
     showPassword: {
       default: boolean('Show password', false)
     },
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 85acfe7c..d18d3012 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -1,6 +1,7 @@
-import { withKnobs, number, text, boolean } from '@storybook/addon-knobs'
+import { withKnobs, number, text, boolean, select } from '@storybook/addon-knobs'
 
 import { SPagination, SRow } from '../components'
+import { BorderRadius } from '../types'
 
 export default {
   component: SPagination,
@@ -17,6 +18,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :small="small"
                  :background="background"
+                 :borderRadius="borderRadius"
+                 :popperClass="borderRadius"
                  :prev-text="prevText"
                  :next-text="nextText"
                  @size-change="handleSizeChange"
@@ -42,6 +45,9 @@ export const configurable = () => ({
     background: {
       default: boolean('Background', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     prevText: {
       default: text('Prev text', '')
     },
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 15a21449..226c63de 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SRadio, SRadioGroup, SRow, SCol } from '../components'
-import { RadioSize } from '../components/Radio'
+import { Size } from '../types'
 
 export default {
   component: SRadio,
@@ -41,7 +41,7 @@ export const configurable = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
@@ -115,7 +115,7 @@ export const radioButtonGroup = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index a75c75ed..9d9a0eba 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -1,6 +1,7 @@
 import { text, withKnobs, boolean, select, number } from '@storybook/addon-knobs'
 
 import { SButton, STooltip, SRow, SMain } from '../components'
+import { BorderRadius } from '../types'
 import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
 
 export default {
@@ -18,6 +19,7 @@ export const configurable = () => ({
                  v-model="model"
                  :content="content"
                  :disabled="disabled"
+                 :borderRadius="borderRadius"
                  :offset="offset"
                  :openDelay="openDelay"
                  @change="handleChange"
@@ -38,6 +40,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     offset: {
       default: number('Offset', 0)
     },
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index 94955808..85215c81 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, boolean, number } from '@storybook/addon-knobs'
+import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
+import { BorderRadius } from '../../types'
 import { InputTypes } from '../../components/Select'
 
 export default {
@@ -25,6 +26,7 @@ export const configurable = () => ({
                  <s-select
                    v-model="model"
                    :disabled="disabled"
+                   :borderRadius="borderRadius"
                    :loading="loading"
                    :multiple="multiple"
                    :input-type="item.inputType"
@@ -34,6 +36,7 @@ export const configurable = () => ({
                    :multiple-text-prefix="multipleTextPrefix"
                    :loading-text="loadingText"
                    :no-data-text="noDataText"
+                   :popperClass="borderRadius"
                    @change="handleChange"
                  >
                    <s-option
@@ -54,6 +57,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     loading: {
       default: boolean('Loading', false)
     },
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index ba750b3e..ec8886d6 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -1,6 +1,7 @@
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { STabs, STab } from '../../components'
+import { BorderRadius } from '../../types'
 import { TabsPosition, TabsType } from '../../components/Tab'
 
 export default {
@@ -14,6 +15,7 @@ export const defaultUsage = () => ({
   template: `<s-tabs
                v-model="activeName"
                :type="type"
+               :borderRadius="borderRadius"
                :position="position"
                :closable="closable"
                :addable="addable"
@@ -30,6 +32,9 @@ export const defaultUsage = () => ({
     type: {
       default: select('Type', [...Object.values(TabsType), '––'], '––')
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     position: {
       default: select('Position', Object.values(TabsPosition), TabsPosition.TOP)
     },
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 4814232f..4209c7c8 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { STable, STableColumn } from '../../components'
-import { TableSize } from '../../components/Table'
+import { Size } from '../../types'
 
 export default {
   component: STable,
@@ -72,7 +72,7 @@ export const configurable = () => ({
       default: boolean('Show header', true)
     },
     size: {
-      default: select('Size', Object.values(TableSize), TableSize.BIG)
+      default: select('Size', Object.values(Size), Size.BIG)
     },
     highlightCurrentRow: {
       default: boolean('Highlight current row', false)
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 13fe0985..3146b2c7 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -143,7 +143,6 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
   color: var(--s-color-base-content-primary);
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
-  border-radius: 8px;
   &:hover, &:active, &:focus {
     color: var(--s-color-base-content-primary);
     background-color: var(--s-color-base-background-hover);
diff --git a/src/styles/card.scss b/src/styles/card.scss
index edc23ef7..ff200792 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -1,6 +1,5 @@
 .s-card {
   color: var(--s-color-base-content-primary);
-  border-radius: 8px;
   border-color: var(--s-color-base-border-primary);
   &.s-clickable {
     cursor: pointer;
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index e8dce297..98d4d158 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -1,7 +1,30 @@
+@mixin checkbox-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      &.is-bordered {
+        border-radius: $border-radius;
+      }
+      .el-checkbox__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .el-checkbox {
   color: var(--s-color-base-content-primary);
+  @include checkbox-border-radius;
+  @include checkbox-border-radius("medium", var(--s-border-radius-medium));
+  @include checkbox-border-radius("small", var(--s-border-radius-small));
+  @include checkbox-border-radius("mini", var(--s-border-radius-mini));
   &.is-bordered {
-    &, &.is-disabled, &.is-disabled.is-checked {
+    &,
+    &.is-disabled,
+    &.is-disabled.is-checked {
       border-color: var(--s-color-base-border-primary);
     }
     &.is-checked {
@@ -17,7 +40,8 @@
   }
   &.s-medium {
     @extend .s-medium;
-    &, &.is-bordered {
+    &,
+    &.is-bordered {
       padding: 9px 15px 7px 10px;
       .el-checkbox__inner {
         height: 16px;
@@ -36,11 +60,11 @@
   }
   &.s-small {
     @extend .s-small;
-    border-radius: 4px;
     .el-checkbox__label {
       font-size: 12px;
     }
-    &, &.is-bordered {
+    &,
+    &.is-bordered {
       padding: 5px 15px 5px 10px;
       .el-checkbox__inner {
         height: 14px;
@@ -60,7 +84,6 @@
 }
 .el-checkbox__inner {
   border-color: var(--s-color-base-border-primary);
-  border-radius: 4px;
   width: 20px;
   height: 20px;
   &::after {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 508f9b87..57b5206c 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -69,6 +69,22 @@ h6 {
   height: $s-size-small;
 }
 
+.s-border-radius-big {
+  border-radius: var(--s-border-radius-big);
+}
+
+.s-border-radius-medium {
+  border-radius: var(--s-border-radius-medium);
+}
+
+.s-border-radius-small {
+  border-radius: var(--s-border-radius-small);
+}
+
+.s-border-radius-mini {
+  border-radius: var(--s-border-radius-mini);
+}
+
 button > span {
   position: relative;
 }
@@ -113,7 +129,7 @@ button > span {
     button.el-button.el-button--default.el-button--small {
       height: $s-size-medium;
       font-size: 14px;
-      border-radius: 4px;
+      border-radius: var(--s-border-radius-mini);
       &:hover, &:active, &:focus {
         color: var(--s-color-theme-accent);
         background-color: var(--s-color-base-on-accent);
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index e2054d22..2696e508 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -1,16 +1,35 @@
+@mixin date-picker-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      & .el-input__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-date-picker {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
   .el-date-editor {
     width: 100%;
-    &.el-input, &.el-input__inner {
+    &.el-input,
+    &.el-input__inner {
       width: 100%;
     }
     .el-range-separator {
       color: var(--s-color-base-content-tertiary);
     }
-    .el-input__inner, .el-range-input {
+    .el-input__inner,
+    .el-range-input {
       &::placeholder {
         color: var(--s-color-base-content-tertiary);
         opacity: 1; // Firefox
@@ -20,6 +39,10 @@
       border-color: var(--s-color-base-border-primary);
     }
   }
+  @include date-picker-border-radius;
+  @include date-picker-border-radius("medium", var(--s-border-radius-medium));
+  @include date-picker-border-radius("small", var(--s-border-radius-small));
+  @include date-picker-border-radius("mini", var(--s-border-radius-mini));
   &.s-has-value {
     .el-date-editor .el-range-separator {
       color: var(--s-color-base-content-primary);
@@ -40,7 +63,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-background-hover);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         background-color: var(--s-color-base-background-hover);
       }
     }
@@ -56,7 +80,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-border-primary);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         background-color: var(--s-color-utility-surface);
       }
     }
@@ -64,7 +89,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-disabled);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         color: var(--s-color-base-content-quaternary);
         background-color: var(--s-color-base-disabled);
       }
@@ -79,7 +105,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -88,16 +113,19 @@
   }
   &.s-select-type {
     .el-date-editor {
-      .el-input__inner, .el-range-input, .el-range-separator {
+      .el-input__inner,
+      .el-range-input,
+      .el-range-separator {
         font-weight: bold;
       }
-      &.el-input__inner, & .el-input__inner {
-        border-radius: 8px;
+      &.el-input__inner,
+      & .el-input__inner {
         padding-left: 12px;
         &:hover {
           border-color: var(--s-color-base-border-primary);
         }
-        &::placeholder, .el-range-input::placeholder {
+        &::placeholder,
+        .el-range-input::placeholder {
           color: var(--s-color-base-content-tertiary);
           font-weight: bold;
         }
@@ -109,7 +137,7 @@
       top: 30%;
       pointer-events: none;
       color: var(--s-color-base-content-tertiary);
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
     &.s-focused {
       .el-date-editor.el-input__inner,
@@ -178,13 +206,18 @@
   .el-picker-panel__content {
     .el-date-table {
       td {
-        &.available:hover, &.today span {
+        &.available:hover,
+        &.today span {
           color: var(--s-color-theme-accent);
         }
-        &.next-month, &.prev-month {
+        &.next-month,
+        &.prev-month {
           color: var(--s-color-base-content-quaternary);
         }
-        &.current:not(.disabled), &.selected, &.start-date, &.end-date {
+        &.current:not(.disabled),
+        &.selected,
+        &.start-date,
+        &.end-date {
           span {
             background-color: var(--s-color-theme-accent);
             color: var(--s-color-utility-surface);
@@ -196,7 +229,8 @@
       }
     }
     .el-month-table td {
-      &.start-date, &.end-date {
+      &.start-date,
+      &.end-date {
         .cell {
           background-color: var(--s-color-theme-accent);
           color: var(--s-color-utility-surface);
@@ -206,14 +240,18 @@
   }
   .el-picker-panel__footer {
     border-top-color: var(--s-color-base-background-hover);
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
     > .el-button {
       height: 32px;
-      border-radius: 4px;
-      &:hover, &:focus {
+      border-radius: var(--s-border-radius-mini);
+      &:hover,
+      &:focus {
         color: var(--s-color-theme-accent);
       }
       &.is-plain {
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           border-color: var(--s-color-theme-accent);
         }
       }
@@ -224,7 +262,6 @@
   }
 }
 .el-time-panel {
-  border-radius: 4px;
   border-color: var(--s-color-base-background-hover);
   .el-time-panel__footer {
     border-top-color: var(--s-color-base-background-hover);
@@ -241,14 +278,16 @@
     }
   }
   .el-time-panel__content {
-    &::after, &::before {
+    &::after,
+    &::before {
       border-top-color: var(--s-color-base-background-hover);
       border-bottom-color: var(--s-color-base-background-hover);
     }
   }
 }
 .el-date-table.is-week-mode .el-date-table__row {
-  &.current, &:hover {
+  &.current,
+  &:hover {
     div {
       background-color: var(--s-color-base-background-hover);
     }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 840b6191..2701d1ae 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -1,5 +1,26 @@
 .el-dialog {
-  border-radius: 8px;
+  &__wrapper {
+    &.s-border-radius {
+      &-big,
+      &-medium,
+      &-small,
+      &-mini {
+        border-radius: 0;
+      }
+    }
+  }
+  .s-border-radius-big & {
+    border-radius: var(--s-border-radius-big);
+  }
+  .s-border-radius-medium & {
+    border-radius: var(--s-border-radius-medium);
+  }
+  .s-border-radius-small & {
+    border-radius: var(--s-border-radius-small);
+  }
+  .s-border-radius-mini & {
+    border-radius: var(--s-border-radius-mini);
+  }
   .el-dialog__title {
     font-weight: bold;
     font-size: 16px;
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index 9801d26a..39db4325 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -1,5 +1,23 @@
+@mixin dropdown-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-button {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .el-dropdown {
   color: var(--s-color-base-content-primary);
+  @include dropdown-border-radius;
+  @include dropdown-border-radius("medium", var(--s-border-radius-medium));
+  @include dropdown-border-radius("small", var(--s-border-radius-small));
+  @include dropdown-border-radius("mini", var(--s-border-radius-mini));
   > .el-button-group {
     > .el-button {
       float: left;
diff --git a/src/styles/input.scss b/src/styles/input.scss
index b4c81805..5c111828 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -1,8 +1,33 @@
+@mixin input-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      .el-input,
+      .el-textarea {
+        > input,
+        > textarea {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
 .s-input {
   font-family: $s-font-family-default;
   width: 100%;
   min-height: $s-size-big;
   position: relative;
+  @include input-border-radius;
+  @include input-border-radius("medium", var(--s-border-radius-medium));
+  @include input-border-radius("small", var(--s-border-radius-small));
+  @include input-border-radius("mini", var(--s-border-radius-mini));
   .el-input__suffix {
     z-index: 1;
   }
@@ -15,7 +40,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index f633a69e..073a9977 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -6,7 +6,7 @@ $color-ide-boolean: #0000FF;
 .s-json-input {
   width: 100%;
   border: 1px solid var(--s-color-base-border-primary);
-  border-radius: $s-border-radius-default;
+  border-radius: var(--s-border-radius-mini);
   &.s-disabled {
     .ace-jsoneditor {
       pointer-events: none;
@@ -103,7 +103,7 @@ $color-ide-boolean: #0000FF;
     background: var(--s-color-base-content-primary);
     border-color: var(--s-color-base-content-primary);
     color: var(--s-color-base-on-accent);
-    border-radius: $s-border-radius-default;
+    border-radius: var(--s-border-radius-mini);
     padding: 10px;
     font-size: 12px;
     line-height: 1.2;
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index e9a9597f..51bbb91a 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -1,8 +1,27 @@
 $margin-bottom-menu-item: 8px;
 
+@mixin menu-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-menu-item,
+      .el-submenu__title {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-menu {
   box-shadow: var(--s-menu-box-shadow);
   padding: 20px 12px;
+  @include menu-border-radius;
+  @include menu-border-radius("medium", var(--s-border-radius-medium));
+  @include menu-border-radius("small", var(--s-border-radius-small));
+  @include menu-border-radius("mini", var(--s-border-radius-mini));
   &:not(.el-menu--horizontal) > :not(:last-child) {
     margin-bottom: $margin-bottom-menu-item;
   }
@@ -12,7 +31,6 @@ $margin-bottom-menu-item: 8px;
 }
 .el-menu-item {
   align-items: center;
-  border-radius: 6px;
   &:not(.is-disabled):hover,
   &.is-active {
     background-color: var(--s-menu-color-hover) !important;
@@ -21,7 +39,7 @@ $margin-bottom-menu-item: 8px;
       color: var(--s-menu-text-color-active);
     }
   }
-  [class^=s-icon-] {
+  [class^="s-icon-"] {
     margin-right: 12px;
     font-size: 20px;
   }
@@ -47,8 +65,7 @@ $margin-bottom-menu-item: 8px;
 .el-submenu__title {
   display: flex;
   align-items: center;
-  border-radius: 6px;
-  [class^=s-icon-] {
+  [class^="s-icon-"] {
     margin-right: 12px;
     font-size: 20px;
   }
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 32cb4d05..6953d9d4 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -1,3 +1,26 @@
+@mixin pagination-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-pagination__sizes {
+        .el-select .el-input {
+          .el-input__inner {
+            border-radius: $border-radius;
+          }
+        }
+      }
+      .el-pagination__editor.el-input {
+        .el-input__inner {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
 .el-pagination {
   &.is-background .el-pager li:not(.disabled) {
     &.active {
@@ -8,7 +31,8 @@
       color: var(--s-color-theme-accent);
     }
   }
-  .btn-prev, .btn-next {
+  .btn-prev,
+  .btn-next {
     color: var(--s-color-base-content-primary);
   }
   button {
@@ -19,10 +43,15 @@
       color: var(--s-color-base-content-quaternary);
     }
   }
+  @include pagination-border-radius;
+  @include pagination-border-radius("medium", var(--s-border-radius-medium));
+  @include pagination-border-radius("small", var(--s-border-radius-small));
+  @include pagination-border-radius("mini", var(--s-border-radius-mini));
   .el-pagination__sizes {
     .el-select .el-input {
       width: 65px;
-      .el-select__caret, .el-input__inner {
+      .el-select__caret,
+      .el-input__inner {
         color: var(--s-color-base-content-primary);
         font-weight: bold;
       }
@@ -30,14 +59,14 @@
         margin-right: 6px;
       }
       .el-input__inner {
-        border-radius: 8px;
         padding-right: 20px;
         padding-left: 5px;
         background-color: var(--s-color-base-background);
         border-color: var(--s-color-base-background);
       }
       &.is-disabled {
-        .el-select__caret, .el-input__inner {
+        .el-select__caret,
+        .el-input__inner {
           color: var(--s-color-base-content-quaternary);
         }
       }
@@ -45,7 +74,6 @@
   }
   .el-pagination__editor.el-input {
     .el-input__inner {
-      border-radius: 8px;
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
       color: var(--s-color-base-content-primary);
@@ -54,17 +82,21 @@
       color: var(--s-color-base-content-quaternary);
     }
   }
-  .el-pagination__total, .per-page-text, .el-pagination__jump {
+  .el-pagination__total,
+  .per-page-text,
+  .el-pagination__jump {
     color: var(--s-color-base-content-tertiary);
     font-weight: normal;
   }
   .el-pager li {
     color: var(--s-color-base-content-primary);
-    &.btn-quicknext, &.btn-quickprev {
+    &.btn-quicknext,
+    &.btn-quickprev {
       color: var(--s-color-base-content-primary);
     }
     &:not(.disabled) {
-      &:hover, &.active {
+      &:hover,
+      &.active {
         color: var(--s-color-theme-accent);
       }
     }
@@ -79,7 +111,8 @@
         color: var(--s-color-base-content-quaternary);
       }
     }
-    .btn-prev, .btn-next {
+    .btn-prev,
+    .btn-next {
       background-color: var(--s-color-base-background);
       &:disabled {
         color: var(--s-color-base-content-quaternary);
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 83b65ab7..0730a45b 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -1,7 +1,28 @@
+@mixin select-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      .el-input__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-select {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
+  @include select-border-radius;
+  @include select-border-radius("medium", var(--s-border-radius-medium));
+  @include select-border-radius("small", var(--s-border-radius-small));
+  @include select-border-radius("mini", var(--s-border-radius-mini));
   .el-select {
     width: 100%;
     i.el-icon-arrow-up {
@@ -73,7 +94,8 @@
         .el-select__caret {
           color: var(--s-color-base-content-quaternary);
         }
-        .el-input__inner, .el-input__inner:hover {
+        .el-input__inner,
+        .el-input__inner:hover {
           border-color: var(--s-color-base-disabled);
           color: var(--s-color-base-content-quaternary);
           background-color: var(--s-color-base-disabled);
@@ -97,7 +119,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -107,7 +128,6 @@
   &.s-select-type {
     .el-select {
       .el-input__inner {
-        border-radius: 8px;
         padding-left: 12px;
         font-weight: bold;
         &:hover {
@@ -189,7 +209,7 @@
     font-size: 16px;
     font-weight: bold;
     padding: 1px;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius-mini);
   }
   &.selected {
     font-weight: normal;
@@ -205,7 +225,7 @@
       border-color: var(--s-color-theme-accent);
     }
     &::after {
-      content: '';
+      content: "";
     }
   }
 }
diff --git a/src/styles/table.scss b/src/styles/table.scss
index fadd0078..576a2079 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -60,7 +60,7 @@
   .el-checkbox__inner {
     height: 20px;
     width: 20px;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius-mini);
     &::after {
       border-width: 2px;
       height: 10px;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index b86e52b6..e6fa2d3c 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,5 +1,41 @@
+@mixin tabs-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      &.el-tabs--card {
+        > .el-tabs__header {
+          .el-tabs__nav {
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: $border-radius;
+          }
+        }
+      }
+      &.s-rounded {
+        .el-tabs__nav-wrap {
+          border-radius: $border-radius;
+          .el-tabs__item {
+            &.is-active {
+              border-radius: $border-radius;
+            }
+            &:focus.is-focus {
+              border-radius: $border-radius;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .s-tabs {
   width: 100%;
+  @include tabs-border-radius;
+  @include tabs-border-radius("medium", var(--s-border-radius-medium));
+  @include tabs-border-radius("small", var(--s-border-radius-small));
+  @include tabs-border-radius("mini", var(--s-border-radius-mini));
   .el-tabs__item {
     font-weight: bold;
     .el-icon-close {
@@ -29,8 +65,6 @@
       border-bottom-color: var(--s-color-base-background-hover);
       .el-tabs__nav {
         border-color: var(--s-color-base-background-hover);
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
       }
       .el-tabs__item {
         border-left-color: var(--s-color-base-background-hover);
@@ -43,7 +77,8 @@
       background-color: var(--s-color-base-background);
       border-bottom-color: var(--s-color-base-border-primary);
       .el-tabs__item {
-        &:hover, &.is-active {
+        &:hover,
+        &.is-active {
           color: var(--s-color-theme-accent);
         }
       }
@@ -55,29 +90,28 @@
     }
     .el-tabs__nav-wrap {
       background-color: var(--s-color-base-background);
-      border-radius: 8px;
       height: 32px;
-      &::after, .el-tabs__active-bar {
+      &::after,
+      .el-tabs__active-bar {
         height: 0;
       }
       .el-tabs__item {
         padding: 0 32px;
         height: 28px;
         line-height: 28px;
-        &:nth-child(2), &:last-child {
+        &:nth-child(2),
+        &:last-child {
           padding: 0 32px;
         }
         &.is-active {
           color: var(--s-color-base-content-primary);
           background-color: var(--s-color-base-on-accent);
           box-shadow: $s-shadow-surface;
-          border-radius: 8px;
           margin: 2px;
         }
         &:focus.is-focus {
           // TODO: make it more focusable
           box-shadow: $s-shadow-surface;
-          border-radius: 8px;
         }
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index b23829bd..f98e6898 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -48,7 +48,12 @@ $s-size-medium: 40px !default;
 $s-size-small: 32px !default;
 $s-size-mini: 24px !default;
 
-$s-border-radius-default: 4px !default;
+$s-border-radius-base: 4px;
+$s-border-radius-mini: $s-border-radius-base !default;
+$s-border-radius-small: $s-border-radius-base * 2 !default;
+$s-border-radius-medium: $s-border-radius-base * 3 !default;
+$s-border-radius-big: $s-border-radius-base * 4 !default;
+
 // Fonts
 $s-font-family-default: 'Sora', sans-serif !important;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
@@ -116,6 +121,16 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Size
+  --s-size-mini: #{$s-size-mini};
+  --s-size-small: #{$s-size-small};
+  --s-size-medium: #{$s-size-medium};
+  --s-size-big: #{$s-size-big};
+  // Border Radius
+  --s-border-radius-mini: #{$s-border-radius-mini};
+  --s-border-radius-small: #{$s-border-radius-small};
+  --s-border-radius-medium: #{$s-border-radius-medium};
+  --s-border-radius-big: #{$s-border-radius-big};
   // Shadows
   --s-shadow-surface: #{$s-shadow-surface};
   --s-shadow-tooltip: #{$s-shadow-tooltip};
diff --git a/src/types/index.ts b/src/types/index.ts
index 4c78a22f..dc62dba7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,6 +4,13 @@ export enum Size {
   SMALL = 'small'
 }
 
+export enum BorderRadius {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}
+
 export enum Direction {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'