csstdg5figs/07-padding-borders-outlines-and-margins/borders_border-radius-blend-details.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Rounded corners up close</title>
<style type="text/css">
body {max-width: max-content;}
.arena {counter-reset: numeric;}
.arena p {position: relative; display: inline-block;
	height: 3.5em; width: 3.5em;
	font-size: 3em; margin: 1em 1ch 0 0;
	overflow: hidden;
	counter-increment: numeric;}
.arena p::before {content: "#" counter(numeric);
	position: absolute; bottom: 0; left: 0;
	display: flex;
	width: 90%;
	height: 1.25em;
	line-height: 1.25em;
	font-size: 80%;
	font-family: Noah, sans-serif;
	background: #FFF; color: #468;}
</style>
<style type="text/css">
b {display: block; height: 3em; width: 3em;
	border: 1em solid;
	border-top-left-radius: 2em;
	border-bottom-width: 0;
	border-right-width: 0;}
.p02 b {border-top-width: 0.5em;}
.p03 b {border-top-style: double;}
.p04 b {border-top-style: double; border-top-width: 0.5em;}
.p05 b {border-color: red tan;}
.p06 b {border-top-style: double; border-top-width: 0.5em; border-color: red tan;}
.p07 b {border-width: 2em 0 0 2em; border-color: red tan;}
</style>
</head>
<body>

<section class="arena">

<p class="p01"><b></b></p>
<p class="p02"><b></b></p>
<p class="p03"><b></b></p>
<p class="p04"><b></b></p>
<p class="p05"><b></b></p>
<p class="p06"><b></b></p>
<p class="p07"><b></b></p>

</section>

</body>
</html>