<!doctype html>
<html>
<head>
<title>Border radius</title>
<link href="/assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section>
<p>Unlike margin and padding, borders can be rounded.</p>
</section>
<section>
<p>This is often used in combination with a background.</p>
</section>
<section>
<p>It can also only adjust specific corners!</p>
</section>
</body>
</html>
index.html
/* Same as before. */
body {
font-family: sans-serif;
padding: 1rem;
}
section { padding: 1rem; }
/* Every one but the first one. */
section:not(:first-child) { margin-block-start: 1rem; }
setup.css
section:nth-child(1) {
border-radius: 50%; /* Relative to size. */
border: 0.5rem dotted deepskyblue;
text-align: center;
}
section:nth-child(2) {
background-color: gold; /* No borders! */
border-radius: 1rem; /* Specific amount. */
}
section:nth-child(3) {
border-end-end-radius: 3rem; /* This logical syntax is tricky. */
border-start-start-radius: 3rem;
border: 1rem solid tomato;
}