Css border radius links

border-radius

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений

Число значений	Результат
1	Радиус указывается для всех четырех уголков.
2	Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3	Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius .

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius .

Источник

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.

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

Источник

CSS border colour and radius issues on links

I have tried adjusting z indexes for various elements, but this has had no effect on the small, white border issue.

I have tried applying border radius to a::before and a:hover::before to see if that would fix the issue in Webkit browsers, but no luck.

Any ideas on why these CSS issues are occurring?

body < background-color: #1A1A1A; padding: 3rem; >.cta < display: inline-block; text-decoration: none; font-weight: 700; font-size: 1.125rem; font-family: "Barlow", sans-serif; letter-spacing: -0.0225rem; color: #D61E15; >.cta--pill < padding: 0.625rem 1rem 0.625rem 1.5rem; position: relative; overflow: hidden; background-color: #fff; border: 0.03125rem solid #E6E6E6; border-radius: 1.3125rem; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; >.cta--pill::before < content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: #D61E15; border: 0.03125rem solid #D61E15; border-radius: 1.3125rem; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: transform 0.35s ease-in-out; -moz-transition: transform 0.35s ease-in-out; transition: transform 0.35s ease-in-out; >.cta--pill .cta-text < padding-right: 2.25rem; position: relative; z-index: 2; >.cta--pill .cta-arrow < display: flex; justify-content: center; align-items: center; width: 1.75rem; height: 1.75rem; position: absolute; top: 0.4375rem; right: 0.5rem; z-index: 2; background-color: #D61E15; box-shadow: 0 2px 5px 0 rgba(176, 25, 17, 0.41); border-radius: 100%; border: 0.03125rem solid transparent; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; >.cta--pill:hover < border-color: #D61E15; box-shadow: 0 4px 10px 0 rgba(176, 25, 17, 0.41); color: #fff; >.cta--pill:hover::before

Источник

border-radius not applying to ul element?

I’ve got the following CSS code, but the -moz-border-radius and -webkit-border-radius styles aren’t being applied to the UL. Is there something obvious I’m missing as to why, or does -border-radius not support UL elements?

ul.navigation < margin-top: 7px; margin-bottom: 10px; list-style-type: none; -moz-border-radius: 7px; -webkit-border-radius: 7px; >ul.navigation li a

4 Answers 4

You need to specify a border property and/or a background color, otherwise you won’t see the rounded border:

Also, the border-radius is not inherited, so if you’re expecting the actual li’s to have the rounded border, you’ll have to set it there.

I was looking at the problem wrong.

ul.navigation < margin-top: 7px; margin-bottom: 10px; list-style-type: none; >ul.navigation li a < background: #ABC8E2; text-transform: uppercase; text-align: left; font-size: 13px; border: 1px solid #375D81; margin-top: -1px; padding: 8px; display: block; color: #183152; text-decoration: none; >ul.navigation li:first-child a < -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; >ul.navigation li:last-child a

(I’ve only applied certain border styles here.) Kip, you were correct, since the UL had no border set there was nothing to set a border-radius on, but I didn’t notice that the border is actually set on the LIs — thus it’s those that want rounding.

Источник

Using border-radius on ul with only giving a radius to the outer li’s

Maybe the answer is really simple. But what I’m trying to do it to make a curved border around the li’s. So not only the outside but also the inside: Examples: Right right http://img198.imageshack.us/img198/577/rightc.png Wrong: wrong http://img689.imageshack.us/img689/4957/wrongc.png Don’t mind the differences. What I’m trying to do it to curve the inner border this is the html:

Semantically speaking, your Dashboard li should not be a list element: it is not an item, but a heading. Therefore, you should really use a h1 , h2 , or h3 .

5 Answers 5

HTML

CSS

I’ve omitted the various border radius specifications for conciseness.

div.roundbox < border-radius: 15px; width: 120px; padding: 10px; background: #BEBEBE; >div.roundbox ul < list-style: none; >div.roundbox ul li < height: 40px; background: #E5E5E5; >div.roundbox ul li:last-child < border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; >div.roundbox h3

Actually, it didn’t occur to me either! I didn’t choose not to mention that old browsers didn’t support those selectors: I just forgot to mention it.

You set the position to relative for the li s, and give them a negative z-index , putting them behind the border.

CSS

HTML

I can’t wait until this is standard across all browsers — typing two sets of border-radius properties for webkit/gecko get’s tiring after a while!

I’ve gone with your solution. A little tip tho: use the combined css: -moz-border-radius: 0px 0px 12px 12px;

@Robbie in the meantime, you can use css3generator.com (or a similar tool) to make you life easier (I did 😉

This is ripped straight from my site:

.header ul < float: left; list-style: none; margin: 0 0 0 140px; >.header ul.right < float:right; >.header li < float: left; font-size: 14px; margin: 0; padding: 0; height: 25px; >.header a.right < background: url('/button.jpg') #1463A3; display: block; float: left; margin: 0; padding: 10px 10px; text-decoration: none; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; >

And the only list items that get curved are ones (prespecified) along the right edge. All other li’s have a square radius.

So really, the only way I’ve found to do it is to simply specify a class for the items you know will be along the edge, and curve those.

Hope this helps! Or at least gets you closer to the answer you’re looking for :-).

Источник