CODEWITHSUNDEEP
javascriptreactjsreact-native
Leo M
Leo M

Reputation: 31

React Native borderRadius one corner not round

Hello this is the code I'm using:

  menuItemButtonContainer: {
    marginRight: 1,
    marginLeft: 1,
    marginTop: 1,
    marginBottom: 1,
    paddingRight: 1,
    paddingLeft: 1,
    paddingTop: 1,
    paddingBottom: 1,
    borderRadius: 10,
    overflow: 'hidden',
    position: "absolute",
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: colors.navy
  },

but for some reason the top right corner is not round. I've been cudgeling my brain for a day.

This is the component code 

<Native.View
          style={[styles.menuItemButtonContainer, {width: 50, height: 30, marginLeft: 0}]}><Native.TouchableHighlight
          underlayColor={colors.darkGray}
          onPress={this.orderObjectChange.bind(this, 'ADD', item.id)}
          style={{
            justifyContent: 'center',
            alignItems: 'center'
          }}><Native.View><Components.Text
          style={{color: colors.navy}}>ADD</Components.Text></Native.View></Native.TouchableHighlight></Native.View>

enter image description here

Upvotes: 1

Views: 5357

Answers (4)

piuland
piuland

Reputation: 3

You may also use the sx prop like this:

sx={{"& .MuiOutlinedInput-root": {
          borderRadius: '0 10px 0 0'
          }}}

Upvotes: -1

Patrick R
Patrick R

Reputation: 6857

As I have reviewed your code and as per that, you try by using below property to give corner radius one bye one for all the corner

borderBottomLeftRadius: 10
borderBottomRightRadius: 10
borderTopLeftRadius: 10
borderTopRightRadius: 10

Upvotes: 1

user9455682
user9455682

Reputation:

Try the border radius on each corner as follows: 

 menuItemButtonContainer: {
    marginRight: 1,
    marginLeft: 1,
    marginTop: 1,
    marginBottom: 1,
    paddingRight: 1,
    paddingLeft: 1,
    paddingTop: 1,
    paddingBottom: 1,
    borderTopLeftRadius: 10, //Top Left Corner
    borderTopRightRadius: 10,// Top Right Corner
    borderBottomLeftRadius: 10,// Bottom Left Corner
    borderBottomRightRadius: 10, // Bottom Right Corner
    overflow: 'hidden',
    position: "absolute",
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: colors.navy
  },

Upvotes: 1

Lakshmi Prasanna
Lakshmi Prasanna

Reputation: 456

Styles you written works, Please see the below. May be border style getting overridden by some other styles in your application.Inspect that element to see.

enter image description here

Upvotes: 1

Related Questions