角丸をつける - web-0127のブログ

角丸（かどまる）をつける

border-radius

CSS3代表的なプロパティ
角丸

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3 角丸</title>
<style>
#radius1, #radius2, #radius3, #radius4 {
  border: 4px solid #F90;
  width: 200px;
  height: 100px;
  margin: 30px 50px;
}
#radius1 {
  border-radius: 20px;
}
#radius2 {
  border-radius: 10px 15px 20px 25px;
}
#radius3 {
  border-top-left-radius: 10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 25px;
}
#radius4 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
</head>
<body>
<div id="radius1"></div>
<div id="radius2"></div>
<div id="radius3"></div>
<div id="radius4"></div>
</body>
</html>

border-radius の基本書式

《index.html》

<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3の勉強</title>
<style>
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 50px;
  background:yellow;
  border:5px solid orange;
  /* border-radius:10px 20px 30px 40px; */
  border-top-right-radius:30px;
}
</style>
</head>
<body>
<div id="test1">test1</div>
</body>
</html>

角丸を使ったテクニック

円形の作り方
画像の切り抜き方

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3の勉強</title>
<style>
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 50px;
  background:green;
  border:5px solid limegreen;
  border-radius:50%;
  background-image:url('flower.jpg');
}
</style>
</head>
<body>
<div id="test1">test1</div>
</body>
</html>

例

<div class="border-radius-xy box-rectangle-basic box-example"></div>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>border-radius | CSS3</title>
<style>
#main {
  margin: 50px;
}
.box-example {
  margin: 20px;
}
.box-square-basic {
  background: #6CF;
  height: 100px;
  width: 100px;
}
.box-rectangle-basic {
  background: #6CF;
  height: 100px;
  width: 150px;
}
.box-half-basic {
  background: #6CF;
  height: 50px;
  width: 100px;
}
 
/* border-radius */
.border-radius-round {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.border-radius-xy {
  -webkit-border-radius: 80px 50px 20px 50px/40px 50px 50px 25px;
  border-radius: 80px 50px 20px 50px/40px 50px 50px 25px;
}
.border-radius-normal {
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.border-radius-halfcircle {
  -webkit-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
}
.border-radius-quarter {
  -webkit-border-radius: 100% 0 0 0;
  border-radius: 100% 0 0 0;
}
</style>
</head>
<body>
<div id="main">
<div class="border-radius-xy box-rectangle-basic box-example"></div>
<div class="border-radius-normal box-rectangle-basic box-example"></div>
<div class="border-radius-round box-square-basic box-example"></div>
<div class="border-radius-halfcircle box-half-basic box-example"></div>
<div class="border-radius-quarter box-square-basic box-example"></div>
</div>
</body>
</html>