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>