CSS border-top-left-radius Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

border-top-left-radius: 25px;

CSS border-top-left-radius Property

CSS border-top-left-radius property rounds the top-left corner of an element's outer border edge.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 2px solid black; min-height: 50px; padding-top: 10px; text-align: center; } #point{ border-top-left-radius: 25px; } #point1{ border-top-left-radius: 50px 15px; } </style> </head> <body> <h1>CSS border-top-left-radius Property</h1> <h2>border-top-left-radius: 25px;</h2> <div id="point"> border-top-left-radius: 25px; </div> <h2>border-top-left-radius: 25px 5px;</h2> <div id="point1"> If two values are given, then the first one is for the top border, the second one for the left border. </div> </body> </html>

Run

Syntax

Using CSS

element{ border-top-left-radius: 25px; }

Using Javascript

object.style.borderTopLeftRadius="25px";

Animatable

Yes, border-top-left-radius property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS border-top-left-radius property is 0.

Property Value

The following table provides a list of all values for CSS border-top-left-radius property.

Value	Explanation
length	Allows you to define the shape the shape of the top-left corners in any CSS length unit.
%	Allows you to define the shape of the top-left corners in %.

Using Percentage Value

Use border-top-left-radius to round the top-left corner of an element's outer border edge.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 2px solid black; min-height: 150px; line-height: 150px; text-align: center; border-top-left-radius: 50%; background: url(ocean.jpg); color: #fff; } </style> </head> <body> <h1>CSS border-top-left-radius Property</h1> <div> border-top-left-radius: 50%; </div> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS border-top-left-radius property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 10px; margin-bottom: 10px; border: 1px solid black; width: 150px; height: 150px; line-height: 150px; } </style> </head> <body> <h1>CSS border-top-left-radius Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.borderTopLeftRadius = "100px"; } </script> </body> </html>

Run