Rounded Corners

Written by

in

<!DOCTYPE html>
<html>
<head>
  <style>
.circle {
  width: 150px;
  height: 150px;
  background: orange;
  border-radius: 50%; /* Makes perfect circle */
  text-align: center;
  line-height: 150px;
  color: white;
  font-weight: bold;
}  </style>
</head>
<body>
  <div class="circle">Circle</div>
</body>
</html>

Explanation:

border-radius: 50% creates a circle.
Smaller values like 10px just make rounded corners.

Comments

Leave a Reply Cancel reply

More posts