Skip to main content

Related Articles

Loading...

How to draw a Circle using HTML and CSS?

How to draw a Circle using HTML and CSS?


 

It is very easy to draw shapes in HTML web page using CSS, for various applications. This is very common requirement for many UI developers to come up with elegant web pages to suit your client requirements. There are many ways to draw UI component on the HTML web page, there are different framework support different methods to draw. But you can easily draw Shapes on HTML web page using CSS and almost every web browser is capable of rendering without any issue. But if you use some frameworks to design your web UI, there might have some limitations specially for different browsers.

 

In this example I am going to draw a Circle on your webpage. There are two sections that you need to add to complete this task. First you need to add HTML component, where the object actually resides on the web page. Next is to change the look and feel of the HTML component to see like Circle. We call it as change the style. For that we need apply some style using CSS.

Here is the HTML page.


<html>
  <head>
  </head>
  <body>
    <div id="circle"></div>
  <body>
</html>


You have to define, HTML header and body parts. In the body part, we put a <DIV> to render our Circle shape.

 

<div id="circle"></div>

We give an ID called “circle” to our <DIV>. We can use this ID to refer our HTML component in CSS code to change the appearance of the component. If you have two HTML components you can give two different IDs and use them to refer in CSS code differently.

 Here is the CSS part.

 
<style>
      #circle {
            width: 50px;
            height: 50px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            background: red;
          }
    </style>

Under header section of HTML page, you have to define your CSS style code. 

<head></head>

 

#circle is referring to HTML DIV with ID “circle”, and apply above style to that component only. That is why we need to specify the DIV ID here.

Then we give height and width to 50 pixels, set border radius to 25 pixels and change background color of the circle to red. You can change these properties as you wish to change the look and feel of your circle.

 

Complete code:

 
<html>
  <head>
    <style>
      #circle {
            width: 50px;
            height: 50px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            background: red;
          }
    </style>
  </head>
  <body>
    <div id="circle"></div>
  <body>
</html>

Above code generate, A HTML page with red circle.

 

 

A HTML page with red circle

Labels:

Comments

Post a Comment

Popular posts from this blog

Building robust APIs with Node.js

Node.js is a popular open-source JavaScript runtime environment that allows developers to build scalable and high-performance web applications. One of the key strengths of Node.js is its ability to build APIs quickly and efficiently. APIs, or Application Programming Interfaces, allow different systems to communicate with each other, enabling data exchange and other operations. Building robust APIs with Node.js requires an understanding of RESTful architecture, which is a widely adopted standard for creating APIs. RESTful APIs provide a standardized way to expose data and functionality over the web using a set of HTTP methods such as GET, POST, PUT, and DELETE. To build a robust Node.js API, developers must choose an appropriate framework and set up a development environment. They should also handle errors and exceptions, implement authentication and authorization, and use middleware to enhance the functionality of the API. Writing test cases, documenting the API using tools such as Swa...
Post a Comment
Read more

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on...
Post a Comment
Read more

DevOps automation using Python - Part 1

DevOps automation is the practice of automating the process of building, testing, and deploying software. Python is a popular language for DevOps automation because of its simplicity and versatility. In this article, we will cover the basics of getting started with DevOps automation using Python. Prerequisites Before we begin, make sure you have Python installed on your system. You can download Python from the official website at https://www.python.org/downloads/ . We will also be using some Python packages, so make sure you have the following packages installed: pip : The package installer for Python. virtualenv : A tool that creates isolated Python environments. Setting up a Virtual Environment The first step in getting started with Python DevOps automation is to set up a virtual environment. A virtual environment allows you to create a separate environment for your Python project, which can help avoid conflicts with other packages on your system. To create a virtual environment, ope...
1 comment
Read more