
- CSS - Home
- CSS - Roadmap
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Types
- CSS - Measurement Units
- CSS - Selectors
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS - Cascading
- CSS - Universal Selectors
- CSS - ID Selectors
- CSS - Group Selectors
- CSS - Class Selectors
- CSS - Child Selectors
- CSS - Element Selectors
- CSS - Descendant Selectors
- CSS - General Sibling Selectors
- CSS - Adjacent Sibling Selectors
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Advanced Features
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS Interview Questions
- CSS Online Quiz
- CSS Online Test
- CSS Mock Test
- CSS - Quick Guide
- CSS - Cheatsheet
- CSS - Properties References
- CSS - Functions References
- CSS - Color References
- CSS - Web Browser References
- CSS - Web Safe Fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - hypot() Function
CSS hypot() function is a mathematical function that returns the square root of the sum of the squares of the numbers specified in its parameter. For calculating the Euclidean distance, the CSS hypot() function can be used. You need to specify units of the values and all units must be of the same type.
Syntax
The syntax for the CSS hypot() function is as follows:
hypot(num1, num2, ...)
Parameter
CSS hypot() function accepts one or more required parameters as given below:
Parameter | Description |
---|---|
num1, num2, ... | It represents the number for which Euclidean distance is being calculated. |
Examples of CSS hypot() Function
The following examples illustrate the use of the CSS hypot() function in various scenarios.
Scaling Width Using hypot() Function
In this example, we used the hypot() function to calculate the width of the div containers.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>CSS hypot() Function</title> <style> div { height: 100px; display: inline-block; margin: 10px; } .box1 { background-color: #f2ca5c; width: calc(hypot(40px, 30px)); } .box2 { background-color: #04af2f; width: calc(hypot(60px, 20px)); } .box3 { background-color: #031926; width: calc(hypot(80px, 40px)); } </style> </head> <body> <h2>CSS hypot() Function</h2> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
Setting Font Size with hypot() Function
In this example, we used the CSS hypot() function to define the font sizes of the paragraphs.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>CSS hypot() Function</title> <style> .txt1 { font-size: calc(hypot(6px, 8px)); } .txt2 { font-size: calc(hypot(1em, 2em)); } .txt3 { font-size: calc(hypot(1em, 3em)); } </style> </head> <body> <h2>CSS hypot() Function</h2> <p class="txt1">This is paragraph 1</p> <p class="txt2">This is paragraph 2</p> <p class="txt3">This is paragraph 3</p> </body> </html>
Using hypot() Function in Border Radius
In this example, we have used the CSS hypot() function to set the border radius of the div boxes.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>CSS hypot() Function</title> <style> .box { width: 100px; height: 100px; background-color: #f0f0ff; display: inline-block; margin: 10px; } .box1 { border-radius: calc(hypot(10px, 10px)); } .box2 { border-radius: calc(hypot(15px, 20px)); } .box3 { border-radius: calc(hypot(25px, 30px)); } </style> </head> <body> <h2>CSS hypot() Function</h2> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </body> </html>
Supported Browsers
Function | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
hypot() | 120 | 120 | 118 | 15.4 | 106 |