body { height: 100vh; display: flex; align-items: center; justify-content: center; } .ship { display: flex; flex-wrap: wrap; flex-direction: row; } .ship.vertical { flex-direction: column; } .ship span { width: 40px; height: 40px; background-color: orange; } .ship .head { border-radius: 20px 0 0 20px; } .ship .tail { border-radius: 0 10px 10px 0; } .ship.vertical .head { border-radius: 20px 20px 0 0; } .ship.vertical .tail { border-radius: 0 0 10px 10px; }