HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use

HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use

Many friends found that the box model is a square by default when learning the front-end. How to turn the box into the desired model? First, let's take a look at the default situation----

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(116, 51, 51);
            box-shadow:0 10px 10px red;
            text-align: center;
            position:absolute;
            margin:0 auto;   
            left:0;
            right:0;
            bottom:0;
            top:0;

        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

The default setting is a square, which may not look good to you. Let’s try a round one!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(28, 99, 60);
            border: 5px solid rgb(55, 0, 255);
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
    <title>Round</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

Look how round we are! Let’s take a look at the semicircular one!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 50px;
            background-color: rgb(175, 42, 216);
            border: 3px solid rgb(26, 236, 26);
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
            position:absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
    <title>semicircle</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

Let’s try other shapes!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(82, 84, 223);
            border-radius: 20px 15px 20px 10px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
        }
    </style>
    <title>demo</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

Knowledge point analysis:

border-radius: Setting a rounded border for an element can create various rounded shapes such as circles, semicircles, ellipses, and quarter circles.
Four values ​​can be set, namely upper left, upper right, lower right, and lower left. Here is a mnemonic: "Start from the upper left and move clockwise." . .

I hope this article has taught you how to use the border-radius property!

This concludes this article on the simple introduction to the HTML+CSS box model case (circle, semicircle, etc.) "border-radius". For more relevant HTML+CSS box model content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  How to fix some content in a fixed position when scrolling HTML page

>>:  HTML realizes hotel screening function through form

Recommend

CSS makes the child container exceed the parent element (the child container floats in the parent container)

Preface Sometimes, we need a floating effect requ...

Solution to the problem of mysql master-slave switch canal

After configuring VIP, the error message that app...

An article teaches you how to use js to achieve the barrage effect

Table of contents Create a new html file: Create ...

Two ways to connect WeChat mini program to Tencent Maps

I've been writing a WeChat applet recently an...

How to implement page screenshot function in JS

"Page screenshot" is a requirement ofte...

MySQL database monitoring software lepus usage problems and solutions

When using lepus3.7 to monitor the MySQL database...

Windows 10 is too difficult to use. How to customize your Ubuntu?

Author | Editor Awen | Produced by Tu Min | CSDN ...

MySQL database deletes duplicate data and only retains one method instance

1. Problem introduction Assume a scenario where a...

Several methods of deploying multiple front-end projects with nginx

I have summarized 3 methods to deploy multiple fr...

Vue template compilation details

Table of contents 1. parse 1.1 Rules for intercep...

JS, CSS and HTML to implement the registration page

A registration page template implemented with HTM...

JavaScript implementation of the Game of Life

Table of contents Concept Introduction Logical ru...

Top 10 Time-Saving Tips to Shorten Web App Development (Graphical Tutorial)

In today's development environment, fast is b...

Detailed explanation of tinyMCE usage and experience

Detailed explanation of tinyMCE usage initializat...

Docker-compose one-click deployment of gitlab Chinese version method steps

1. Introduction to gitlab Gitlab official address...