border-top-right-radius

Функции PHP

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Sep

2010

Синтаксис

border-top-right-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>border-top-right-radius</title>
  <style type="text/css">
   .radius {
    background: #f0f0f0;
    border: 1px dashed #000;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head> 
 <body> 
  <div style="border-top-right-radius: 10px" class="radius">
   border-top-right-radius: 10px
  </div>
  <div style="border-top-right-radius: 70px 40px" class="radius">
   border-top-right-radius: 70px 40px
  </div>
 </body> 
</html>

Результат данного примера в браузере Chrome показан на рис. 2.

Рис. 2