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

Replies

Oldest  Newest  Rating
+2 Gavin Lee · August 11, 2015
CSS:

#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 -->

</div>


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 Hafiz Ameer Hamza · August 11, 2015
in css sheet...

#color 
{
width= 100 px;
height =100 px;
background=grey;
}

in body of html... 

<div id="color"> </div>
0 uma singh · October 8, 2015
You can use jquery and css for creating circle shape. 
 here a code for jquery and css



$(document).ready(function()
{
 $("div").css("border-radius", "50%");
});


#circle {
   width: 100px;
   height: 100px;
   background: red;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
}
0 Jeff the Killer · August 12, 2015
thnx
0 Brotsky Tv · August 25, 2015
CSS COde:


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


Might this link works:--       https://www.brotsky.tv/2015/01/15/how-to-make-a-circle-in-htmlcss-tutorial/
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.

http://entertainment7899.blogspot.com/search/label/html
  • 1

HTML / CSS / Web Design

107,249 followers
About

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

Links
Moderators