<div class="card--block first">
	<h3>Card Item 01</h3>
	<p>Card Item 01では.card--blockにborder-radiusを設定しているだけです。<br/>
		子要素にはborder-radiusが適応されていないので、背景色を設定すると角の部分がはみ出します。
	</p>
	<a class="bottom_bar" href="#">詳しくはこちら</a>
</div>

<div class="card--block second">
	<h3>Card Item 02</h3>
	<p>Card Item 02では.card--blockにborder-radiusを設定し、子要素のはみ出している部分にもborder-top-left-radiusなどを適応し、角を削っています。</p>
	<a class="bottom_bar" href="#">詳しくはこちら</a>
</div>

<div class="card--block third">
	<h3>Card Item 03</h3>
	<p>Card Item 03では.card--blockにborder-radiusを設定し、overflow: hidden;を設定。</p>
	<a class="bottom_bar" href="#">詳しくはこちら</a>
</div>
* { box-sizing: border-box; }

.card--block {
	display: block;
	margin: 10px 0px;
	padding: 0px;
	width: 320px;
	height: 250px;
	position: relative;

	background: #eee;
	border-radius: 15px;

	h3 {
		display: block;
		margin: 0px;
		padding: 10px;

		color: white;
		background: #555;
	}
	
	p {
		display: block;
		margin: 0px;
		padding: 10px;
	}
	
	.bottom_bar {
		display: block;
		padding: 10px;
		width: 100%;
		position: absolute;
		left: 0px;
		bottom: 0px;
		box-sizing: border-box;

		background: #ccc;
	}
}

.card--block.first {
}

.card--block.second {
	h3 {
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	
	.bottom_bar {
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}
}

.card--block.third {
	overflow: hidden;
}

ul.col {
	display: block;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-size: 0px;

	> li {
		display: inline-block;
		margin: 0px;
		padding: 10px;
		width: 33%;
		box-sizing: border-box;

		font-size: 16px;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.