React Native Border Css

Question

I'm a very beginner at react-native. I'm trying to design like the image given below. But can't make the red marked part. Can anyone help me to solve this by saying what CSS property should I use to design this part? I know I have to use border-radius but can't reach out what would be the other property for making the appropriate design like the image given.

You can use `box-shadow` which I think that will create your goal; Try this `box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);` — Kevin M. Mansour, May 04 '21 at 21:27
Also try this which more responsive; `box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);` — Kevin M. Mansour, May 04 '21 at 21:32

score 1 · Answer 1 · answered May 04 '21 at 21:29

1

Take a look at the box-shadow property (Docs here)

.card {
  border-radius: 10px;
  height: 100px;
  width: 200px;
  box-shadow: 0px 5px 6px -1px #58585838;
}

<div class="card">
</div>

answered May 04 '21 at 21:29

Charles Lavalard

2,061
6
26

score 0 · Answer 2 · edited May 04 '21 at 23:18

0

Can you put your code so we can see where's the problem? But you can use these properties to change it:

borderBottomRightRadius:value,
borderBottomLeftRadius:value

Example:

borderBottomRightRadius:10

edited May 04 '21 at 23:18

Kevin M. Mansour

2,915
6
18
35

answered May 04 '21 at 21:34

Firas

13
1
5

How can i set shadow at bottom – megh May 05 '21 at 19:16
Check this link :https://ethercreative.github.io/react-native-shadow-generator/ – Firas May 05 '21 at 20:06
If it doesn't help you , i think this one will : https://medium.com/game-development-stuff/how-to-apply-shadows-on-react-native-fa745d374ae7 – Firas May 05 '21 at 20:13

React Native Border Css

2 Answers2