Создание закруглённых углов с помощью свойства CSS border-radius.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Скруглённые углы: border-radius</title> <style> body { font: 14px courier; background: #06c; color: #000; } p { width: 300px; height: 100px; padding: 50px; margin: 20px 0 0 20px; background: white; float: left; } code { display: block; padding: 10px; background: #def; border-radius: 10px; } #corners1 { border-top-left-radius: 100px; } #corners2 { border-radius: 100px; } #corners3 { border-radius: 0 50px 100px 200px; } #corners4 { padding: 30px; background: none; border-radius: 50px; border: 20px solid #fff; } #corners5 { border-radius: 25%; } #corners6 { border-radius: 200px/100px; } #borderCollie { border-radius: 75px/125px; border-bottom-left-radius: 75px; border-bottom-right-radius: 75px; width: 120px; height: 90px; padding: 80px 15px 30px 15px; } </style> </head> <body> <p id="corners1"><code>border-top-left-radius: 100px;</code></p> <p id="corners2"><code>border-radius: 100px;</code></p> <p id="corners3"><code>border-radius: 0 50px 100px 200px;</code></p> <p id="corners4"><code>border-radius: 50px;<br>border: 20px solid #fff;</code></p> <p id="corners5"><code>border-radius: 25%;</code></p> <p id="corners6"><code>border-radius: 200px/100px;</code></p> </body> </html>
Страницы в тему:
- Границы
- Закруглённые углы(Внушительный урок CSS)