How to Make Circle Images using CSS


Hi All Today I am going to teach you how to create circle images in your HTML pages.



In Good old days we had websites that displayed all images in the shape of SQUARE or rectangles and now its time to change it and make something new and cool.So, Lets try making circular images in HTML pages.

Well, You Might Have Seen that Websites like Google plus displays your profile image in a circular shape. Have you not felt this as cool. But, I Tell you This is Awesome and You can also Do the SAME


So This Trick can be done by applying a small CSS Property called Border radius

And for this you will have to use “ border-radius:50% 50% 50% 50%; “

See the Code Below


<html>



<head>



<style>



#circle



{



border-radius:50% 50% 50% 50%;  



width:300px;



height:300px;







}



</style>



</head>



<body>



<img src="skin-tone.jpg"
id="circle">



</body>



</html>

Now Save the Above file as Circle.html or anyname.html


Lets see How This Works

I am using an image “skin-tone.jpg” see the above code

You can see that I have declared an id called “circle” inside the <style> tag . Then I have set border-radius to 50% for all the 4 sides .When Each Side Has Border-radius of 50% then the image will automatically become a circle.

All you have to do is to assign this id to the image .then your image will become a circle...Hope Your Liked this....

Comments

  1. Anonymous4 April 2014 at 10:16

    (h)

    ReplyDelete
  2. Dpirate124 November 2014 at 16:43

    thank you so much for this wonderful tutorial :)

    but i have 1 more question.
    how to move the circle to right side or center or left?

    ReplyDelete
  3. teser4 January 2015 at 15:51

    It really worked for me ... i was looking for this output ... thank u so much ...

    ReplyDelete
  4. king12 March 2015 at 17:29

    thnx

    ReplyDelete
  5. Harshal kadam14 June 2015 at 18:21

    thanxxx

    ReplyDelete
  6. Unknown17 March 2016 at 12:23

    It's nice....
    it's a very usefull.......
    thank you.....

    ReplyDelete
  7. Anticancer Medicine17 March 2016 at 17:46

    Thanks for sharing this post. I use this code and got right solution which is i have required.

    ReplyDelete

Post a Comment

Popular posts from this blog

Linux Shell Script to count no of occurrences of a digit in a number

Image
This Code is a Linux shell script to count no of occurrences of a digit in a number .So What Exactly this Program Does. This Shell Script will first accept Ask the user to Enter A number .Then it Asks the user to Enter the digit of which the occurrence is to be found. then it displays the no of occurrences in the number. for example if the user Enters a number "34565" and he wants to find how many times the digit "5" is repeated in the number "34565" so he executes this piece of codes and gets the answer as "2" Code is Given below (save it as occur.sh) ___________________________________________________________________________________________ #to count the occurrences in a give n digit c=0 echo "Enter Number " read num x=$num echo "Enter the digit whose occurance has to be found " read digit while [ $num -ne 0 ] do rem=`expr $num % 10` if [ $rem -eq $digit ] then c=`expr $c + 1` fi num=`expr $nu
Read more

Hack Wifi with Fern Wifi Cracker

Image
          Fern Wifi Cracker is a Wireless security auditing and attack software program written using the Python Programming Language and the Python Qt GUI library , the program is able to crack and recover WEP/WPA/WPS keys and also run other network based attacks on wireless or ethernet based networks Operating System Supported The Software runs on any Linux machine with the programs prerequisites , But the program has been tested on the following Linux based operating systems: Ubuntu KDE/GNOME BackTrack Linux BackBox Linux Prerequisites The Program requires the following to run properly: The following dependencies can be installed using the Debian package installer command on Debian based systems using "apt-get install program" or otherwise downloaded and installed manually Aircrack-NG Python-Scapy Python Qt4 Python Subversion Xterm Reaver (for WPS Attacks) Macchanger Features Fern Wifi Cracker currently supports the foll
Read more

How to Decompile JAR files and View Source Code of Java Programs

Image
In software terms, JAR (Java Archive) is a package file format typically used to aggregate many Java class files and associated metadata and resources (text, images, etc.) into one file to distribute application software or libraries on the Java platform. Typically, The Contents of any JAR file can be viewed by Extracting the JAR file with the Help of Tools like WinZIP or WinRAR . Once You have successfully extracted the contents of the JAR file . you will get a lot of Files with file extension " .class " and these class files are not in Human Readable Format. So, to Overcome this problem and to view the original JAVA source code hidden inside these class files stored inside the JAR file container ,we use a tool called JD-GUI . JD stands for "Java Decompiler" . It is a standalone graphical utility that displays Java source codes of “ .class ” files. You can browse the reconstructed source code with the JD-GUI for instant access to methods
Read more