I have several divs, each with a different background-image, they are flex items and are automatically arranged based on view width. The question is, is it possible to detect which ones are at the 4 corners at any given time so that I can assign a border radius to the but ONLY when it is at one of the corners.
see images sample image 3x2
--- HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/javascript/common.js"></script>
<link rel="stylesheet" href="/css/common/site.css" />
<link rel="stylesheet" href="/css/page/home.css" />
<title>Parcero Web Design</title>
<meta name="description" content="Parcero Web Main Page" />
<link rel="canonical" href="https://parceroweb.co/index" />
<link rel="stylesheet" href="https://use.typekit.net/gsc8tmx.css" />
<link rel="preload" href="/images/catcoder-color.webp" as="image" />
<link rel="preload" href="/images/oldbooks-color.webp" as="image" />
<link rel="preload" href="/images/cafe-color.webp" as="image" />
<link rel="preload" href="/images/customers-color.webp" as="image" />
<link rel="preload" href="/images/integrate-color.webp" as="image" />
<link rel="preload" href="/images/result-color.webp" as="image" />
</head>
<body>
<div id="page-content">
<div id="header-box"></div>
<div class="container">
<div class="box" id="city"><p>Nosotros somos locales</p></div>
<div class="box" id="experience"><p>Años de experiencia</p></div>
<div class="box" id="technology"><p>Entendemos la tecnología</p></div>
<div class="box" id="customers"><p>Atrae más clientes</p></div>
<div class="box" id="integrate"><p>integra tu mundo</p></div>
<div class="box" id="result"><p>El resultado</p></div>
</div>
<!-- <div id="footer-box"></div> -->
</div>
<script>
insert_page_header();
// insert_page_footer();
</script>
</body>
</html>
---- CSS
#page-content {
background-image: url("/images/mockup.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: calc(100vh + var(--footer-height));
}
#page-content::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.88);
height: calc(100vh + var(--footer-height));
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
padding-left: 10%;
padding-right: 10%;
}
.box {
display: inline-block;
width: 320px;
aspect-ratio: 1/1;
color: aliceblue;
text-align: center;
font-size: 22px;
padding-top: 16px;
font-family: "Quicksand", sans-serif;
}
.container > div:nth-child(odd) {
background-color: rgba(160, 160, 160, 0.35);
color: white;
}
.container > div:nth-child(even) {
background-color: rgba(225, 225, 225, 0.52);
color: white;
}
#city {
background-image: url("/images/cafe-mono.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#technology {
background-image: url("/images/catcoder-mono.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#experience {
background-image: url("/images/oldbooks-mono.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#customers {
background-image: url("/images/customers-mono.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#integrate {
background-image: url("/images/integrate-mono.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#result {
background-image: url("/images/result-mono.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#experience:hover {
background-image: url("/images/oldbooks-color.webp");
}
#city:hover {
background-image: url("/images/cafe-color.webp");
}
#technology:hover {
background-image: url("/images/catcoder-color.webp");
}
#customers:hover {
background-image: url("/images/customers-color.webp");
}
#integrate:hover {
background-image: url("/images/integrate-color.webp");
}
#result:hover {
background-image: url("/images/result-color.webp");
}