Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

border-radius

v1.0.0arrow_drop_down
v1.0.0
STATUS
Passing
DOWNLOADS
0
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
784 B
subject
Shorthand that accepts a value for side and a value for radius and applies the radius value to both corners of the side.
1 contributor
Use border-radius in your project ?
Copied
npm i @bit/ranm8.polished2.shorthands.border-radius
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
// Styles as object usage const styles = { ...borderRadius('top', '5px') } // styled-components usage const div = styled.div` ${borderRadius('top', '5px')} ` // CSS as JS Output div { 'borderTopRightRadius': '5px', 'borderTopLeftRadius': '5px',
modifieddraft
chevron_left
chevron_right
shorthands/borderRadius ()

Shorthand that accepts a value for side and a value for radius and applies the radius value to both corners of the side.

Example
// Styles as object usage
const styles = {
  ...borderRadius('top', '5px')
}

// styled-components usage
const div = styled.div`
  ${borderRadius('top', '5px')}
`

// CSS as JS Output

div {
  'borderTopRightRadius': '5px',
  'borderTopLeftRadius': '5px',
}
Test Summary

returns the proper values for the top side

Pass

returns the proper values for the bottom side

Pass

returns the proper values for the right side

Pass

returns the proper values for the left side

Pass

returns the proper values when passed an integer

Pass

returns the proper values when passed zero

Pass

should throw an error when no radius value is provided

Pass

should throw an error when an invalid side value is provided

Pass