CODEWITHSUNDEEP
cssreactjsreact-nativeborder
StuffedPoblano
StuffedPoblano

Reputation: 695

React Native broken up border

I am looking for some styling guidance for React-Native. I am wanting to create a border that only has a certain amount of the corners colored. Something like this: enter image description here

I currently have this: enter image description here

  captureSquare: {
    height: 450,
    width: 450,
    borderWidth: 2,
    borderColor: '#FFFFFF,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },

I am not sure how to break up the borders. Any ideas?

Upvotes: 3

Views: 1948

Answers (1)

StuffedPoblano
StuffedPoblano

Reputation: 695

Was able to do this by adding 4 <View />s to the captureSqaure and giving them the following properties:

  topLeftEdge: {
    position: 'absolute',
    top: 0,
    left: 0,
    height: 25,
    width: 25,
    borderColor: '#FFFFFF,
    borderLeftWidth: 3,
    borderTopWidth: 3,
  },

Upvotes: 1

Related Questions