How to Create a Red Circle Using Inline CSS

Using inline CSS, you can easily create a red circle without needing images or external SVG files. This method allows you to style elements directly within the HTML file, keeping your code simple and lightweight. Below, we’ll demonstrate how to create a red circle using inline CSS in an HTML document.

Why Use Inline CSS?

Inline CSS is often used for quick styling or when you want to apply specific styles directly to an HTML element without affecting the entire stylesheet. While it’s generally better to use external or internal CSS for most styling, inline CSS can be useful in certain scenarios, especially for small adjustments or prototypes.

Example of a Red Circle with Inline CSS

Below is an example of how to create a red circle using inline CSS:

<div style="width: 100px; height: 100px; background-color: red; border-radius: 50%;"></div>

This code creates a red circle with a width and height of 100 pixels. The border-radius property is set to 50%, which makes the element take the shape of a circle.