csstdg5figs/07-padding-borders-outlines-and-margins/borders_border-radius-still-boxes.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Elements with rounded corners are still boxes</title>
<style type="text/css">
body {padding: 1ch; margin: 0 auto;}
.arena p {font-size: 1.33em;}
</style>
<style type="text/css">
body {background: cyan;}
#float {border-radius: 50%; float: left; width: 10ch; background: silver; margin: 0; font-size: 2em;}
.arena p {clear: none;}
</style>
</head>
<body>

<section class="arena">

<p id="float">
This is a rounded floated element.
</p>
<p>
Littera mirum litterarum ad nibh nihil. In in feugait east cleveland bob hope congue est ut. Phil donahue quinta consequat bobby knight nobis qui litterarum tation, don shula formas. Decima imperdiet eric metcalf illum id enim the flats ullamcorper oakwood possim chagrin falls township habent. Olmsted township broadview heights in euismod paul brown brecksville molestie rocky river. Sam sheppard est lobortis the arcade claritas nostrud.
</p>
<p>
Dolor et eorum vero. Consequat shaker heights duis cuyahoga river qui typi sollemnes arsenio hall diam vel est dolor. Et north olmsted autem collision bend harvey pekar philip johnson chagrin falls william g. mather gothica tracy chapman. Aliquip accumsan option browns lakeview cemetary iusto pierogies facit qui assum sed lectorum. South euclid parum cuyahoga valley investigationes roger zelazny duis independence, bedford heights dolor me anteposuerit lorem. Nulla typi ruby dee processus liber peter b. lewis.
</p>

</section>

</body>
</html>