CSS Border & Background – Mabruri Portal Muslim

Pemrograman Web

About Lesson

Corner

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
  border-radius: 25px;
  background-color: #04AA6D;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

#div2 {
  border-radius: 25px;
  border: 2px solid #04AA6D;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

#div3 {
  border-radius: 25px;
  background-image: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a background color:</p>
<div id="div1">Rounded corners!</div>

<p>Rounded corners for an element with a border:</p>
<div id="div2">Rounded corners!</div>

<p>Rounded corners for an element with a background image:</p>
<div id="div3">Rounded corners!</div>

</body>
</html>

Border Image

Contoh 1

#borderimg {
  border: 10px solid transparent; /* Required for border-image */
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Contoh 2

#borderimg {
  border: 10px solid transparent;  /* Required for border-image */
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}