Why is border radius changing when zooming? - html

Question

This might very well be the stupidest question but why is the border radius of items changing when you zoom the viewport by Ctrl + mousewheel or through browser zoom? (To test it, run the code snippet below and open it in full page, then zoom in and out) The border radius is set in pixels, so why is it changing? Also, I always have to use flex layout to center text vertically inside a container, is there a better way to vertically a text? Setting display: inline-block and vertical-align: middle is not working.
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: 12px;
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>

Answer 1

I think, you want only the text to be zoomed and the border radius to look the same. Therefor you could use a screen dependent value like vw or vh. For example:
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
Working example:
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>