style.css
index.html
div:nth-child(1) {
border-radius: 50%; /* Relative to size.*/
border-style: solid;
}
div:nth-child(2) {
background-color: deepskyblue;
border-radius: 10px; /* Absolute amount. */
}
div:nth-child(3) {
background-color: gold;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
}
/* Same as before. */
body {
font-family: sans-serif;
padding: 20px;
}
div { padding: 20px; }
/* Every one but the first one. */
div:not(:first-child) { margin-top: 20px; }
<!DOCTYPE html>
<html>
<head>
<title>Border radius</title>
<link href="/assets/styles/reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>
<p>Unlike margin and padding, borders can be rounded.</p>
</div>
<div>
<p>This is often used in combination with a background.</p>
</div>
<div>
<p>It can also only adjust specific corners!</p>
</div>
</body>
</html>