Messing around with image borders

rpg-docs/client/views/character/character.css

@@ -0,0 +1,63 @@
+.flexContainer {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+#abilityScores {
+	text-align: center;
+	flex-basis: 120px;
+	flex-grow: 1;
+	max-width: 340px;
+}
+
+/*Float boxes are indivisble, have shadows*/
+.floatBox{
+	border-image-width: 90px 54px 50px 54px;
+	border-image-outset: 10px;
+	border-image-source: url('/png/big-border.png');
+	border-image-slice: 271 163 151 163;
+	border-image-repeat: stretch;
+	
+	padding: 5px 10px 5px 10px;
+	margin: 10px;
+	background: white;
+	border-radius: 20px;
+}
+
+.bigborder{
+	
+}
+
+/* headings in floatboxes */
+.floatBox h2{
+	background: black;
+	color: white;
+	font-size: 1em;
+	padding: 2px 15px;
+}
+
+.floatBox h2:first-child{
+	margin: -5px -5px 0px -5px;
+}
+
+.floatBox.rounded {
+	
+	display: inline-block;
+	text-align: center;
+}
+
+/* Stats */
+#armorClassBox {
+	width: 90px;
+	height: 100px;
+	background-image: url('/svg/ac.svg');
+	background-repeat: no-repeat;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.statValue {
+	font-size: 2em;
+}