reactjs - How can I use different properties for the same component using Styled Component for React JS?

Question

For example for same component at some places I want to use border while at other places border-bottom

How can I achieve this?

Also can anyone please tell me what this code in styled component means:

color: ${prop('theme.color.blue', '#0F0F3A')};

question from:https://stackoverflow.com/questions/65862310/how-can-i-use-different-properties-for-the-same-component-using-styled-component

Answer 1

Each properties can take 4 values. Set width to 0 if you don't want the border.

div {
 padding: 20px;
 border-style: solid dashed dotted solid;
 border-width: 10px 20px 30px 40px;
 border-color: blue yellow green red;
}

<div> I AM A DIV</div>