How to create a circle-shaped background using pure html and css?

+1 Jeff the Killer · August 11, 2015
any help would be greatly appreciated... thnx:)
with the color gray

Post a Reply


Oldest  Newest  Rating
0 uma singh · October 8, 2015
You can use jquery and css for creating circle shape. 
 here a code for jquery and css

 $("div").css("border-radius", "50%");

#circle {
   width: 100px;
   height: 100px;
   background: red;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
0 Brotsky Tv · August 25, 2015

.circle:before {
   content: ' \25CF';
   font-size: 200px;

Might this link works:--
0 syed raz · August 19, 2015
Create a div first.Then in css,set border radius to 50%..Height width should be equal.
visit the page to find more about html.
0 Jeff the Killer · August 12, 2015
+1 Hafiz Ameer Hamza · August 11, 2015
in css sheet...

width= 100 px;
height =100 px;

in body of html... 

<div id="color"> </div>
+2 Gavin Lee · August 11, 2015

#Background {
width: 200px;
height: 200px;
background: grey;
font-size: 10px;
text-align: center;
color: black;

.circle {
border-radius: 50%;
width: 150px;
height: 150px; 

Then you're going to want to include the HTML.

<div id="Background" class="circle">

<!-- Place Your Content Here -->


and there you have it, with some minor edits you can make this work for pretty much anything you're going for just remember that the border-radius: 50% is that makes it a circle.
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.