Главная » Языки программирования

Javascript div border radius

На чтение 10 мин
Содержание
  1. border-radius
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. Formal definition
  7. Formal syntax
  8. Examples
  9. Live Samples
  10. Specifications
  11. Browser compatibility
  12. How to Change Border Radius of Div in JavaScript?
  13. Conclusion
  14. Related Tutorials
  15. Popular Courses by TutorialKart
  16. Salesforce
  17. SAP
  18. Accounts
  19. Database
  20. Programming
  21. App Developement
  22. Mac/iOS
  23. Apache
  24. Web Development
  25. Online Tools
  26. How to Change Border Radius of HTML Element in JavaScript?
  27. JavaScript – Change the Border Radius of HTML Element
  28. Conclusion
  29. Related Tutorials
  30. Javascript Reference — HTML DOM Style borderRadius Property
  31. Browser Support
  32. Syntax
  33. Property Values
  34. Technical Details
  35. Example

border-radius

The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse .

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset;

The border-radius property is specified as:

Values

radius Is a or a denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right Is a or a denoting a radius to use for the border in the top-left and bottom-right corners of the element’s box. It is used only in the two-value syntax.
top-right-and-bottom-left Is a or a denoting a radius to use for the border in the top-right and bottom-left corners of the element’s box. It is used only in the two- and three-value syntaxes.
top-left Is a or a denoting a radius to use for the border in the top-left corner of the element’s box. It is used only in the three- and four-value syntaxes.
top-right Is a or a denoting a radius to use for the border in the top-right corner of the element’s box. It is used only in the four-value syntax.
bottom-right Is a or a denoting a radius to use for the border in the bottom-right corner of the element’s box. It is used only in the three- and four-value syntaxes.
bottom-left Is a or a denoting a radius to use for the border in the bottom-left corner of the element’s box. It is used only in the four-value syntax.
Читайте также:  Css codes for wordpress

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

border-radius: 1em/5em; /* It is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; 
border-radius: 4px 3px 6px / 2px 4px; /* It is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;

Formal definition

  • border-top-left-radius : 0
  • border-top-right-radius : 0
  • border-bottom-right-radius : 0
  • border-bottom-left-radius : 0
  • border-bottom-left-radius : two absolute s or s
  • border-bottom-right-radius : two absolute s or s
  • border-top-left-radius : two absolute s or s
  • border-top-right-radius : two absolute s or s
  • border-top-left-radius : a length, percentage or calc();
  • border-top-right-radius : a length, percentage or calc();
  • border-bottom-right-radius : a length, percentage or calc();
  • border-bottom-left-radius : a length, percentage or calc();

Formal syntax

Examples

pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre> pre id="example-2"> border: groove 1em red; border-radius: 2em; pre> pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre> pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre> pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre> pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre> pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre> 
pre  margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1  border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2  border: groove 1em red; border-radius: 2em; > pre#example-3  background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4  border: none; border-radius: 40px 10px; background: gold; > pre#example-5  border: none; border-radius: 50%; background: burlywood; > pre#example-6  border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7  border: dashed; border-width: 2px 4px; border-radius: 40px; >

Live Samples

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

How to Change Border Radius of Div in JavaScript?

To change the border radius of a div using JavaScript, get reference to the element, and assign required border radius value to the element.style.borderRadius property.

Conclusion

In this JavaScript Tutorial, we learned how to change the border radius of a div using JavaScript.

  • How to Change Border Color of Div in JavaScript?
  • How to Change Border Style of Div in JavaScript?
  • How to Change Border Width of Div in JavaScript?
  • How to Change Bottom Border of Div in JavaScript?
  • How to Change Font Color of Div in JavaScript?
  • How to Change Font Family of Div in JavaScript?
  • How to Change Font Size of Div in JavaScript?
  • How to Change Font Weight of Div in JavaScript?
  • How to Change Height of Div in JavaScript?
  • How to Change Left Border of Div in JavaScript?
  • How to Change Margin of Div in JavaScript?
  • How to Change Opacity of Div in JavaScript?
  • How to Change Padding of Div in JavaScript?
  • How to Change Right Border of Div in JavaScript?
  • How to Change Text in Div to Bold in JavaScript?
  • How to Change Text in Div to Italic in JavaScript?
  • How to Change Top Border of Div in JavaScript?
  • How to Change Width of Div in JavaScript?
  • How to Change the Background Color of Div in JavaScript?
  • How to Change the Border of Div in JavaScript?
  • How to Clear Inline Style of Div in JavaScript?
  • How to Hide Div in JavaScript?
  • How to Insert Element in Document after Specific Div Element using JavaScript?
  • How to Underline Text in Div in JavaScript?
  • How to get Attributes of Div Element in JavaScript?

Salesforce

SAP

Accounts

Database

Programming

App Developement

Mac/iOS

Apache

Web Development

Online Tools

©Copyright — TutorialKart 2023

Источник

How to Change Border Radius of HTML Element in JavaScript?

JavaScript – Change the Border Radius of HTML Element

To change the border radius of a HTML Element using JavaScript, get reference to this HTML element, and assign required border radius value to the element.style.borderRadius property.

In the following example, we will change the border radius of HTML Element with id «myElement» to «10px» , in JavaScript, using element.style.borderRadius property.

example.html

Conclusion

In this JavaScript Tutorial, we learned how to change the border radius of a HTML Element using JavaScript.

  • How to Change Border Color of HTML Element in JavaScript?
  • How to Change Border Style of HTML Element in JavaScript?
  • How to Change Border Width of HTML Element in JavaScript?
  • How to Change Bottom Border of HTML Element in JavaScript?
  • How to Change Font Color of HTML Element in JavaScript?
  • How to Change Font Family of HTML Element in JavaScript?
  • How to Change Font Size of HTML Element in JavaScript?
  • How to Change Font Weight of HTML Element in JavaScript?
  • How to Change Height of HTML Element in JavaScript?
  • How to Change Left Border of HTML Element in JavaScript?
  • How to Change Margin of HTML Element in JavaScript?
  • How to Change Opacity of HTML Element in JavaScript?
  • How to Change Padding of HTML Element in JavaScript?
  • How to Change Right Border of HTML Element in JavaScript?
  • How to Change Text in HTML Element to Bold in JavaScript?
  • How to Change Text in HTML Element to Italic in JavaScript?
  • How to Change Top Border of HTML Element in JavaScript?
  • How to Change Width of HTML Element in JavaScript?
  • How to Change the Background Color of HTML Element in JavaScript?
  • How to Change the Border of HTML Element in JavaScript?
  • How to Clear Inline Style of HTML Element in JavaScript?
  • How to Get Children of an HTML Element in JavaScript?
  • How to Get Class Names of an HTML Element as List in JavaScript?
  • How to Get Class Names of an HTML Element as String in JavaScript?
  • How to Get First Child of an HTML Element in JavaScript?
  • How to Get Height of an HTML Element in JavaScript?
  • How to Get Last Child of an HTML Element in JavaScript?
  • How to Get Next Sibling of an HTML Element in JavaScript?
  • How to Get Previous Sibling of an HTML Element in JavaScript?
  • How to Get Width of an HTML Element in JavaScript?
  • How to Hide HTML Element in JavaScript?
  • How to Insert Element in Document after Specific HTML Element using JavaScript?
  • How to Iterate over Children of HTML Element in JavaScript?
  • How to Tag Name of an HTML Element in JavaScript?
  • How to Underline Text in HTML Element in JavaScript?
  • How to get Attributes of HTML Element Element in JavaScript?
  • How to get Number of Child Elements of this HTML Element in JavaScript?
  • JavaScript – Change Style of HTML Element

Источник

Javascript Reference — HTML DOM Style borderRadius Property

The borderRadius property gets and sets the shorthand property for the four border-*-Radius properties.

Browser Support

borderRadius Yes 10.0 Yes Yes Yes

Syntax

Return the borderRadius property:

var v = object.style.borderRadius

Set the borderRadius property:

object.style.borderRadius=1-4 length|% / 1-4 length|%|initial|inherit

The borderRadius uses the following rules to deal with the missing values.

  • The four values are given in the order top-left, top-right, bottom-right, bottom-left.
  • If bottom-left is omitted it is the same as top-right.
  • If bottom-right is omitted it is the same as top-left.
  • If top-right is omitted it is the same as top-left.

Property Values

Value Description
length Set the size in length unit. Default value is 0
% Set the size of the corners in percent
initial Set to default value
inherit Inherit from parent element.

Technical Details

Example

The following code shows how to add rounded borders to a div element.

 !DOCTYPE html> html> head> style> #myDIV !--from w w w . j a v a 2 s. co m--> border: 1px solid black; width: 300px; height: 300px; >  body> button onclick="myFunction()">test div >"myDIV">Hello script> function myFunction() < document.getElementById("myDIV").style.borderRadius = "25px"; >

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник

Оцените статью
© 2023 Программирование