为不同的孩子组合div边框和边框半径

Question

我正在做一个项目，我必须在看起来像这样的 div 之间创建边界线 --

但到目前为止我到达这里

我无法正确合并它们的地方

CSS代码

export const Container = styled.div`
    &:nth-child(even){
        justify-content: right;
        flex-direction: row-reverse;
        text-align: right;
        border-right: 3px solid rgba(255, 255, 255, 0.12);
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        position: relative;

    }
    &:nth-child(odd){
        border: 3px solid rgba(255, 255, 255, 0.12);
        border-radius: 30px  30px;
        border-right: none;
    }`

React-HTML

<Container>
 {N.map((elementInArray, index) => (
        <Bunch key={index}>
            <Box className={'box'+elementInArray}>
                <InnerBox/>
            </Box>
            <TextBox2 className={'textbox'+elementInArray}>
                <Heading1>{year}</Heading1>
                <Heading3>{'Q' + elementInArray}</Heading3>
                <Para>{text}</Para>
            </TextBox2>
        </Bunch>
    )
    )}
</Container>