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

How to make if judgment in js as smooth as silk

Table of contents Preface Code Implementation Ide...

Zabbix's psk encryption combined with zabbix_get value

Since Zabbix version 3.0, it has supported encryp...

Detailed explanation of why v-if and v-for in Vue are not recommended to be used together

This article mainly introduces why v-if and v-for...

js realizes 3D sound effects through audioContext

This article shares the specific code of js to ac...

How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page

Set the width of the body to the width of the wind...

Summary of knowledge points about null in MySQL database

In the MySQL database, null is a common situation...

Why do select @@session.tx_read_only appear in DB in large quantities?

Find the problem When retrieving the top SQL stat...

An article to understand the use of proxies in JavaScript

Table of contents What is an agent Basic knowledg...

Vue Learning - VueRouter Routing Basics

Table of contents 1. VueRouter 1. Description 2. ...

Solve the problem of resetting the Mysql root user account password

Problem description: The following error message ...

Detailed explanation of JavaScript closure issues

Closures are one of the traditional features of p...

Code for aligning form checkbox and radio text

Alignment issues like type="radio" and t...

Zabbix3.4 method to monitor mongodb database status

Mongodb has a db.serverStatus() command, which ca...

A very detailed explanation of Linux C++ multi-thread synchronization

Table of contents 1. Mutex 1. Initialization of m...

Ubuntu installs multiple versions of CUDA and switches at any time

I will not introduce what CUDA is, but will direc...