Hongmu Notes
Home › Language Notes › CSS border
Language Notes CSS

CSS border

Browse 175 📖 approx. 2 minutes
CSS border 
div{
    border:2px solid;
    border-radius:25px;
}

Definition and usage

border-radius Property is a shorthand property for setting the four border-radius properties.

Tip: This property allows you to add rounded borders to elements!

Default value:0
Inheritance:no
Version:CSS3
JavaScript syntax:object.style.borderRadius="5px"

Grammar

border-radius: 1-4 length|% / 1-4 length|%;

Note: Set each radii of four values. If omitted bottom-left, then with top-right Same.
If omitted bottom-right, then with top-left Same. If omitted top-right, then with top-left Same.

值Description
lengthDefines the shape of the fillet.
%Defines the shape of the fillet as a percentage.

Example 1

border-radius:2em;

Equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Example 2

border-radius: 2em 1em 4em / 0.5em 3em;

Equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
微信赞赏

WeChat

支付宝赞赏

Alipay

Copyright Statement · No reproduction allowed

Author of this article: Hong Mu

Link to this article: https://www.4s5.cn/en/archives/210.html

Copyright statement:This article is an original article. Any form of reproduction, collection, or mirroring without authorization is prohibited. Violators will be prosecuted. If you need to reprint, please indicate the source and keep the link to the original text.

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

css positioning

css positioning Language Notes CSS

Syntax: position: static | relative | absolute | fixed | center | page | sticky Default value: static Applies to: All elements except the display attribute defined as table-column-group | table-column Inheritance: No Animation: No...
👁 119
css vh and vw adaptive

css vh and vw adaptive Language Notes CSS

In the mobile terminal, REM is used to change the root HTML, and the mobile terminal adaptation is realized through a piece of JS. This article uses pure CSS viewport units to self-adapt. Although the current compatibility is not fully acceptable, it does not prevent you from recognizing the power of vw and vh. The implementation of responsive layout relies on media queries (Media Queries). Select the width size of mainstream devices as breakpoints to target...
👁 356

Recommended reading

Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 198
Modification of typecho paging style

Modification of typecho paging style Program Notes Typecho

Sir, times have changed! Typecho is currently the most perfect solution, because Baidu can only see the code of fixed thinking. The actual generated HTML code is breathtakingly clean and fully customized, including adding classes to the li element, adding classes to the a element, adding classes to the previous page and next page, and removing the li tags that come with typecho to express more. I can even add some text to the content inside...
👁 517
Typecho article page comment style modification

Typecho article page comment style modification Program Notes Typecho

When you need to use typecho for template development, the default comment style is ugly. Therefore, comments need to be re-output or styled. The default comment template file path is: comments.php Mainly used related variables<?php $comments->gravatar('40', ''); ?> //Avatar has two parameters, size,...
👁 389
Typecho's API for adding, deleting, modifying and querying databases

Typecho's API for adding, deleting, modifying and querying databases Program Notes Typecho

Typecho database provides a very easy-to-use API, which is not much different from the native SQL writing method. At the same time, it also handles common SQL security issues, such as SQL injection. From a practical perspective, this article introduces common scenarios for typecho to operate databases and related API usage. Table creation and deletion During the development process of Typecho plug-in, you often need to create your own table. Typecho_… mentioned above
👁 552
PHP ob function record

PHP ob function record Language Notes PHP

Usage of the following three functions ob_get_contents(); ob_end_clean(); ob_start(); You can use these functions to buffer local files and execute local script code. Use ob_start() to save the output code into the buffer, and the page will not be displayed; then use ob_get_contents to get the data in the buffer. o…
👁 141
Summary of methods for calling popular comment articles and calling latest articles in Typecho

Summary of methods for calling popular comment articles and calling latest articles in Typecho Program Notes Typecho

Typecho articles call the Typecho program. When designing a theme, the sidebar sometimes needs to call popular articles or the latest articles. We can call it directly through the script at the specified location. In this article, we will organize this method of calling articles, which can be directly called and used in templates where needed in the future. In fact, designing a theme is just that. After the static template is completed, it is called directly. The latest article calls <?php $t…
👁 295