Border radius 10px in html

border-radius

You can give any element “rounded corners” by applying a border-radius through CSS. You’ll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it’s above.

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Those are referred to as “physical” properties because they set the radius according to the physical location of the corner (e.g. top-left). But border-radius is part of the Logical Properies and Values specification, meaning it has logical equivalents of the physical properties:

Physical property	Logical property
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius

It’s a bit mind-bendy at first, but the order really matters, especially when working with border-radius as a shorthand. The order goes like this, where the first direction refers to the block direction and the second direction refers to the inline direction.

Physical property	Logical property
top-left	start-start
top-right	start-end
bottom-left	end-start
bottom-right	end-end

• Initial value: 0
• Applies to: all elements
• Inherited: no
• Computed values: pair of computed values
• Animation: by computed value

The border-radius property takes between one and four length or percentage values, where one value sets the radius for all four corners at once, while four sets each individual corner.

/* Single value */ /* Sets all four corners */ border-radius: 10px; /* Two values /* /* top-left and bottom-right top-right and bottom-left */ border-radius: 25% 0; /* Three values */ /* top-left top-right/bottom-left bottom-right */ border-radius: 1rem 1.5rem 1.25rem; /* Four values */ /* top-left top-right bottom-right bottom-left */ border-radius: 8px 10px 12px 14px; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset;

So, if we wanted to set a different radius on the top-left and bottom-right but apply the same radius on the top-right and bottom-left together, we can use the three-value syntax:

You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn’t have to be perfectly circular, it can be elliptical. This is done using a slash ( / ) between two values:

Note: Firefox only supported elliptical borders in 3.5+. Older WebKit browsers (e.g. Safari 4 and below) incorrectly treat 40px 10px the same as 40px / 10px .

The border-radius property can accept any valid CSS length unit. That means everything from px , rem , em , ch , vh , vw , and a whole bunch more are fair play.

You may specify the value of border-radius in percentages. This is particularly useful for creating a circle or ellipse shape, but can be used any time you want the border-radius to be directly correlated with the element’s width.

Note: In Safari percentage values for border-radius only supported in 5.1+. In Opera, only supported in 11.5+.

There are a few things to watch for when working with the border-radius property:

Clipped background images

If the element has an image background, it will be clipped at the rounded corner naturally:

Sometimes you can see a background-color “leak” outside of a border when border-radius is present (here’s a perfect example). To prevent this you use the CSS background-clip property:

Jay Sitter covered what happens when the value of one corner radius is so big that it overlaps the radius of another corner. Like this example, where we’re going for a “pill” shape on the right side with less rounding on the left:

We’re swtting a radius of 40px on the top-left and bottom-left corners, so why are they so boxy? That’s because the 999em value of the other two corners is covering them up. Jay digs deep into the math behind this and how to prevent it from happening, so it’s worth reading his article for more context.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

It’s unnecessary now, but for the absolute best possible browser support, you could prefix the property with -webkit- and -moz- to ensure legacy browsers can join the fun:

Notice the order of those properties: the vendor prefixes are listed first and the non-prefixed “spec” version is listed last. This is the correct way to do it. Border radius is a particularly good example of why we do it that way. In slightly more complicated version of using border-radius (where you pass two values instead of one), the older -webkit- vendor prefix would do something entirely different than the “spec” version. So, if we blindly copy-and-paste the same values to all three properties, we could see different results cross-browser. For the most consistency long-term, it’s best to list the “spec” version last.

It’s pretty realistic these days to drop prefixes and just use vanilla border-radius , as discussed here.

Here’s each individual property, with vendor prefixes:

Each of these values can have a space-separated value as well, like 5px 10px , which behaves the same as a slash-separated value in shorthand ( [space] ).

Related

border

background-clip

border-collapse

border-image

border-spacing

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Hello,
I indeed absolutely needed some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class: -webkit-box-shadow: 0 0 1px #000; The x and y position of the shadow are 0 so the shadow is centered, all wee need is to adjust the blur value expanding it just 1px (in base of need) above the corner edges making them look smoother. Of course the shadow color must be the same as your rounded element’s background/border-color… There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper. Now, if you are the type of designer that can use small compromises, it should just work for you like this, but if you are a finicking freak like I am, you should absolutely find a way to target your CSS to specific devices. At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least preventing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density: @media only screen and (-webkit-device-pixel-ratio:.75) /*for low density (ldpi) Android layouts */
> @media only screen and (-webkit-device-pixel-ratio:1) /*for low density (ldpi) Android layouts */
> @media only screen and (-webkit-device-pixel-ratio:1.5) /*for low density (ldpi) Android layouts */
> Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer 😉

If you’re still reading comments, I would love to know why this is not working on my site. I have a drop down menu under “photos” and as can be seen when first hovering the corners are rounded but then they revert back to square corners. I don’t see any errors in the way I’ve formatted the corners and oddly it was working until I changed the border color, then it stopped. http://danielpaymar.com css is mainMenu.ddsmoothmenu ul li ul

position: absolute; left: 0; display: none; /*collapse all sub menus to begin with*/ visibility: hidden; width:auto; margin-left: -20px; padding-bottom:0px; border: 1px solid #686868; border-radius: 10px; -webkit-border-radius: 4px; -webkit-box-shadow: 0px 0px 6px 4px rgba(8, 8, 8, .5); box-shadow: 0px 0px 6px 4px rgba(8, 8, 8, .5); /*border-bottom:1px solid #222;*/ 

Nice tutorial. Aptly explained. You went beyond most other tutorials and explained things others only dream about. Thanks.

Источник

border-radius

CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:

Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:

• border-radius: 5px 10px 15px 20px; (4 значения)
  1. Верхний левый – 5px
  2. Верхний правый – 10px
  3. Нижний правый – 15px
  4. Нижний левый – 20px

• border-radius: 10px 20px 15px; (3 значения)
  1. Верхний левый – 10px
  2. Верхний правый и нижний левый – 20px
  3. Нижний-правый – 15px

• border-radius: 15px 5px; (2 значения)
  1. Верхний левый и нижний правый – 15px
  2. Верхний правый и нижний левый – 5px

Овальные скругления

CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ / :

Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

• border-radius: 55px 45px 40px / 35px 20px;
  1. Верхний левый – 55px / 35px
  2. Верхний правый и нижний левый – 45px / 20px
  3. Нижний правый – 40px / 35px

Важно понимать, что форма элемента в любом случае остаётся прямоугольной. Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:

Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.

Значение по умолчанию:	0
Применяется:	ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse;
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.borderRadius=»5px»

Синтаксис

border-radius: [величина | проценты] [ / [величина | проценты] ]

Значения свойства

Значение	Описание
величина	Величина радиуса указывается в единицах измерения, используемых в CSS.
%	Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Источник