Inner border-radius example

dabblet.css

/*  Inner border-radius example */

body,
html,
#root {
	box-sizing: border-box;
	position: relative;
	padding: 0;
	margin: 0;
	/* height: 100%; */
	min-height: 100vh;
	width: 100vw;
	font-size: 16px;
	line-height: 24px;
	 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; text-rendering: optimizeLegibility; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	background-color: rgba(209, 209, 209, 0.1);
}

*,
*:before,
*:after {
	box-sizing: border-box;
	position: relative;
	padding: 0px;
	margin: 0px;
	/* border-color: #333 !important;
	border-width: 1px !important;
	border-style: dashed !important;
	outline: #ddd solid 1px !important; */
} 

body {
	min-height: 100vh;
	width: 100vw;
	background-color: #ffff;
	display: grid;
	place-items: center;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

/*div, */
.wrapper {
 	border: 1px solid #d2d2d7; 
}

.wrapper { 
position: relative;
z-index: 1;
	width: 400px; height: 400px; border-radius:32px; display: flex; flex-direction: column; gap: 12px; padding: 16px;  
	background-image: url('https://res.cloudinary.com/trovo/styled-x/assets/pattern/blur-gradients/5.jpg');
	    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%;
    }

.wrapper::after { 
inset: 0px;
position: absolute;
z-index: 10;
background-image: linear-gradient(to left, #2d44db, #a6a9edff);
	    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%;
    background-blend-mode: multiply;
}

.item { 
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	flex: 1 0 auto; 
	padding: 16px;
	gap: 8px;
	border-radius: 16px; 
	
}

.item:first-of-type { background-color: hsla(0, 0%, 98%, 1.0); }
.item:nth-of-type(2) { background-color: hsla(0, 0%, 98%, 1.0); }


.skeleton {
	/*background-image: linear-gradient(to right, hsla(0, 0%, 92%, 1.0) 50%, hsla(0, 0%, 94%, 1.0) 70%, hsla(0, 0%, 92%, 1.0)  90%);*/
	background-image: linear-gradient(135deg, #F1f1f1 1.06%, #F2F2F2 100%);
}


.skeleton.page-title {
	border-radius: 4px;
	height: 72px; 
	width: fit-content;
	color: transparent;
}

.skeleton.heading {
	border-radius: 4px;
	height: 48px; 
	width: fit-content;
	color: transparent;
}

.skeleton.text { 
	border-radius: 4px;
	height: 24px;
	color: transparent;
}

.skeleton.media {
	border-radius: 9999px;
	height: 56px; 
	width: 56px; 
	color: transparent;
}

dabblet.html

<div class="wrapper"> 
	<div class='item'>  
<!--		<div class='skeleton media'></div>
		<div class='skeleton heading'>TitleTitleTitle</div>
		<div class='skeleton text'>TitleTitleTitleTitleTitleTitleTitle</div> 
		<div class='skeleton text'>TitleTitleTitleTitleTitleTitleTitle</div>-->
	</div>
	<div class='item'></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}