Внутренний border-radius у блока

Пример:

Текст

HTML:

<div class="round">Текст</div>

1	<div class="round">Текст</div>

CSS:

.round {
	background:
		radial-gradient(circle at 0 100%, rgba(0,0,0,0) 35px, #BFE2FF 10px),
		radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 35px, #BFE2FF 10px),
		radial-gradient(circle at 100% 0, rgba(0,0,0,0) 35px, #BFE2FF 10px),
		radial-gradient(circle at 0 0, rgba(0,0,0,0) 35px, #BFE2FF 10px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;	
	max-width: 500px;
	margin: 20px auto;
	padding: 30px;
	font-family: Verdana, sans-serif;   
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}

.round {

background:

radial-gradient(circle at 0 100%, rgba(0,0,0,0) 35px, #BFE2FF 10px),

radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 35px, #BFE2FF 10px),

radial-gradient(circle at 100% 0, rgba(0,0,0,0) 35px, #BFE2FF 10px),

radial-gradient(circle at 0 0, rgba(0,0,0,0) 35px, #BFE2FF 10px);

background-position: bottom left, bottom right, top right, top left;

background-size: 50% 50%;

background-repeat: no-repeat;

max-width: 500px;

margin: 20px auto;

padding: 30px;

font-family: Verdana, sans-serif;

font-size: 16px;

line-height: 22px;

text-align: center;

}

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: