Blog

How to set CSS3 Border-Radius with Slash Syntax

admin February 7, 2014 code css css3 design develop html5
How to set CSS3 Border-Radius with Slash Syntax

What could I possibly say about the CSS3 border-radius property that hasn’t been said before? Well, I can’t claim that anything I’ll be saying in this article will be completely new to anyone who regularly reads articles covering front-end technologies.

Setting CSS3 Border-Radius with Slash Syntax

Sometimes, however, the apparent simplicity of a particular CSS3 property might blind us to the fact that there can be a whole lot more going on than we think.

That’s exactly what this short article will help to establish—specifically in relation to the border-radius property.

But don’t worry—I’ll go through this carefully, covering some border-radius basics first, to ease into the discussion.

Before I get into the meat of things, I’m happy to announce that I’ve recently had the privilege of co-authoring an exciting new book project published by SitePoint. It’s called HTML5 and CSS3 for the Real World and is scheduled for a late May launch. Naturally, border-radius will be covered in that upcoming book, but I thought it would be nice to expand on that topic here and provide a little extra for those interested in delving into some of the finer points associated with this property.

The border-radius Basics

border-radius is a pretty simple property to use, and has 100% support across all modern browsers, and is even supported in quite a few earlier browser versions. Here’s how the syntax looks in its most basic shorthand form:

#element {

  border-radius: 10px;

}

That will put a 10px radius (i.e., a rounded edge) on each corner of the targeted element. If you want to specify a different value for each corner, you can do this:

#element {

  border-radius: 10px 5px 20px 16px;

}

The values start with the top-left and move clockwise.

Just like the margin and padding properties you can, of course, omit one or two values and the existing values will be used to determine the omitted ones:

#element {

  border-radius: 10px 5px 20px;

}

In that last example, although I’ve omitted the value for the bottom-left corner, the bottom-left corner will inherit its radius value from the one specified for top-right (the second value). Similarly, if you omitted the third and fourth values, then the third value (bottom-right) would inherit from the first (top-left).

Finally, you can also declare each corner individually using longhand syntax, like this:

#element {

  border-top-left-radius: 10px;

  border-top-right-radius: 5px;

  border-bottom-right-radius: 20px;

  border-bottom-left-radius: 16px;

}

Pretty simple. And I’ll bet you already knew all of that, didn’t you?

Now, let’s bring in a little complexity so we can really get to know this CSS3 property.

Different Values for Horizontal and Vertical Radii

Because the standard way of declaring the border-radius values (discussed above) has become so widespread, you may not be aware of an alternative syntax for this property.

Take a look at the following code example:

#element {

  border-radius: 55px / 25px;

}

When I first saw that style of syntax, with the slash in between the two values, my first reaction was: That can’t be right! But it is. Here’s how the spec explains it:

“If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.”

Below is an image of what the element looks like with the above syntax, and with dimensions of 200px by 200px and a gray background. Bear in mind, a CSS3-capable browser would be required to see the HTML rendition.

 

The slash-based syntax might be a difficult thing to wrap your mind around, so let’s examine how the syntax relates to what’s happening to the shape of the corners on that element.

 

In the above image, I’ve blown up the element and placed an ellipse into the corner so that the upper curve of the ellipse overlaps the rounded corner as closely as possible. A “radius”, according to the dictionary definition is “a straight line extending from the center of a circle or sphere to the circumference or surface.”

According to the spec, the values you give the border-radius property “define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge.” Thus, if you add the full ellipse (as I’ve done above), you’ll see exactly how the radii are calculated. In the image, I’ve drawn arrows indicating the horizontal and vertical radii (marked with “H” and “V”).

Keep in mind that because of pixelation (in the original and the blown up version), this can’t be an exact science; that would be something more appropriate when dealing with vector-based shapes.

Other Horizontal/Vertical Radii Options

Of course, the slash-based syntax is not just limited to two values; if you wish, you can set specific vertical and horizontal radius values for each corner of the element.

The syntax from above can alternatively be expressed like this:

#element {

  border-radius: 55px 55px 55px 55px / 25px 25px 25px 25px;

}

The values before the slash represent the horizontal radii for the top-left, top-right, bottom-right, and bottom-left corners, respectively. The values after the slash represent the vertical radii for those same corners, in that order.

And of course, similar to the traditional syntax, you can omit one or two values from before or after the slash, and the missing values will inherit from the existing ones.

You also have the option to declare different vertical and horizontal radii using the longhand syntax for each corner. So if we wanted to use longhand syntax to create the same shape from above, we would do this:

#element {

  border-top-left-radius: 55px 25px;

  border-top-right-radius: 55px 25px;

  border-bottom-right-radius: 55px 25px;

  border-bottom-left-radius: 55px 25px;

}

Notice that this time there is no slash used. In this case, the two space-separated values on each line represent the horizontal and vertical radii, respectively, for the given corner.

When Should This Syntax Be Used?

It should be noted that this syntax to target vertical and horizontal radius values for each corner would only be used if you want the vertical and horizontal radius values on a single corner to differ from one another. That means you would not need to use this syntax if you want equal horizontal and vertical radius values for each corner.

Significantly, you could also employ this syntax when changing radius values via scripting. Thus, when used appropriately, this could open the door for some interesting animations using transitions or keyframe-based animations.

So in most—if not all—cases, you can stick to the traditional syntax, and only use the syntax described here if you want one or more nonsymmetrical rounded corners.

Even so, this information should be enough for you to want to experiment a little further with this otherwise well-known CSS3 property.

Let me know what you come up with.

Like
Like Love Haha Wow Sad Angry

1421 Responses

  2. poker dewa
    |

    Dalam memilah web slot online terbaik 2023 di Indonesia pasti perihal yang wajib dicermati. Salah satu perihal yang kerap dicermati merupakan memilah salah satu opsi web yang menawarkan banyak bonus serta jackpot. poker dewa muncul menawarkan bermacam hadiah serta bonus besar. nagapoker nyatanya player dapat menikmati bermacam opsi yang ada dari banyak provider judi slot ternama di segala dunia.

  3. binance dai
    |

    Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  6. gate io
    |

    After reading your article, it reminded me of some things about gate io that I studied before. The content is similar to yours, but your thinking is very special, which gave me a different idea. Thank you. But I still have some questions I want to ask you, I will always pay attention. Thanks.

  10. gate fon şifresi
    |

    Very nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  11. slot
    |

    … [Trackback]

    […] Info on that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  12. 뉴토끼
    |

    … [Trackback]

    […] Read More on on that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  13. GarrettEssex
    |

    I recently tried CBD gummies because the earliest organic cbd gummies circumstance and they exceeded my expectations. The dash was delightful, and they helped me unwind and relax. My anxiety noticeably decreased, and I felt a meaning of whole well-being. These gummies are now a fundamental in my self-care routine. Hugely propose for a logical and quieting experience.

  15. Edwinchuch
    |

    I recently embarked on a expedition to grow autoflower weed seeds for the win initially in good time, and it was an incredibly buy cheap marijuana seeds satisfying experience. As a beginner, I was initially apprehensive, but the prepare turned gone from to be surprisingly straightforward. First off, the germination taper off was mellow sailing. The seeds sprouted shortly, and their vigor was impressive. I followed the recommended guidelines regarding lighting, nutrients, and watering, and the plants responded positively. A particular of the biggest advantages of autoflowering strains is their know-how to automatically transformation from vegetative proliferation to flowering, regardless of mild cycle.

  17. buy weed online
    |

    … [Trackback]

    […] Find More here to that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  49. ufabet
    |

    … [Trackback]

    […] Read More to that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  69. 20bet
    |

    Your article gave me a lot of inspiration, I hope you can explain your point of view in more detail, because I have some doubts, thank you.

  351. twice
    |

    If you’re looking for a trusted source that can help you find the right real-money BTC casino, look no further than TopBitcoinCasinos.net! We’ve been working tirelessly to provide the best reviews and guides on all things Bitcoin gambling-related – don’t wait another minute before checking out what we have available today with our expert advice straight from our casino experts. At a typical crypto casino, you should find that Bitcoin and quite a few other cryptocurrencies can be used. If it’s a casino where both types of currency are accepted (crypto and traditional), the list of cryptocurrencies you can use might be shorter – at some of these casinos, for example, only Bitcoin can be used. There are very few online casinos that accept bitcoin only, and most widened their offer to other popular cryptocurrencies such as Ether (ETH), Bitcoin Cash (BCH), Litecoin (LTC) and more.
    https://www.divephotoguide.com/user/torpacosa1987
    All bonus credits are able to be used on everything except baccarat, roulette, poker, or sports. The deposit match bonus credits are valid for 14 days. Bet credits from the no deposit bonus expire after seven days. Answer surveys and receive Bitcoin, Ethereum, or Ripple! Bitstarz is a great example of an online casino that combines excellent roulette games with the convenience of crypto gambling; that’s why it’s the best Bitcoin roulette casino right now. These games often include popular casino classics such as blackjack, roulette, baccarat, and poker. $1,000 First Bet on Caesars Measure BitStarz Bitcoin Casino performance and get insights with AppstoreSpy data you won’t find anywhere else using our Analytics, Revenue Stats ans Trends.

  596. Rastrear Celular
    |

    O software de monitoramento de telefones celulares CellSpy é uma ferramenta muito segura e completa, é a melhor escolha para o monitoramento eficaz de telefones celulares. O aplicativo pode monitorar vários tipos de mensagens, como SMS, e-mail e aplicativos de bate-papo de mensagens instantâneas, como Snapchat, Facebook, Viber e Skype. Você pode visualizar todo o conteúdo do dispositivo de destino: localização GPS, fotos, vídeos e histórico de navegação, entrada de teclado, etc.

  646. linetogel
    |

    Absolutely thrilled to share my thoughts here! 🌟 This content is refreshingly unique, blending creativity with insight in a way that’s both engaging and enlightening. Every detail seems meticulously crafted, showcasing a deep appreciation and passion for the subject. It’s uncommon to find such a perfect blend of information and entertainment! Kudos to everyone involved in creating this masterpiece. Your hard work and dedication are truly remarkable, and it’s an absolute joy to witness. Looking forward to seeing more of this fantastic work in the future! Keep rocking us all! 🚀👏💫 #Inspired #CreativityAtItsBest

  719. bandar slot terpercaya
    |

    🚀 Wow, blog ini seperti perjalanan kosmik meluncur ke alam semesta dari kegembiraan! 🌌 Konten yang menarik di sini adalah perjalanan rollercoaster yang mendebarkan bagi pikiran, memicu kegembiraan setiap saat. 🎢 Baik itu inspirasi, blog ini adalah harta karun wawasan yang inspiratif! #KemungkinanTanpaBatas Terjun ke dalam perjalanan kosmik ini dari pengetahuan dan biarkan pikiran Anda berkelana! ✨ Jangan hanya membaca, alami kegembiraan ini! 🌈 Pikiran Anda akan bersyukur untuk perjalanan mendebarkan ini melalui dimensi keajaiban yang menakjubkan! ✨

  754. psymn
    |

    Ao explorar o mundo das apostas online, a segurança é um fator primordial. Comparável a um banco bem protegido, a 1Win se destaca como uma casa de apostas confiável. Nesta análise, vamos mergulhar nos detalhes que fazem da 1Win um porto seguro para os apostadores, com uma menção especial à 1Win Apostas. Um aspecto positivo do Lucky Jet é que ele tem o potencial de ter um valor máximo de multiplicador de 5072 vezes. Pode-se facilmente imaginar as várias vantagens que isso pode trazer. É possível que o jogo tenha multiplicadores de cinquenta, cem e até duzentos. Parece que o multiplicador de 50 é o mais popular, com base no feedback dos jogadores. Como regra geral, um multiplicador de 150 ocorre dentro de duas a três horas. Apesar do fato de o multiplicador ser baixo, você ainda tem uma boa chance de ganhar.
    https://adddirectoryurl.com/listings132186/aviator-bet-como-jogar
    O significado dos jogos é que a aposta do Aviator bet trouxe o multiplicador máximo. A essência do jogo é a capacidade de determinar rapidamente quando o planador começará a cair para ter tempo de sacar seu dinheiro. Se você compreender o princípio básico de como funciona ou entender como usar determinados períodos de tempo, suas chances de ganhar aumentarão significativamente. Você pode aprender mais sobre como entender esses detalhes usando o histórico dos jogos nos tópicos de bate-papo do jogo. Aqui você pode deixar comentários sobre como esses métodos funcionam na prática. ‘Mais Você’ ganha previsões para 2024 Decisão deve sair publicada ainda hoje pela Comissão de Valores Mobiliários norte-americana; caso os ETFs sejam aprovados, moedas poderão ser compradas pelo seu preço à vista, e não com base em especulações, explicam os analistas

  791. treve
    |

    Provider: Pragmatic Play If you want to spice up your usual free slots routine, keep reading. We’ve rounded up the top new slot machines you should try on VegasSlotsOnline. Tidak ada habis-habisnya ide kreatif pragmatic play untuk menyenangkan hati para pemain slot. Baru-baru ini pragmatic play telah meluncurkan fitur slot demo x500 anti rungkad. Slot demo x500 dibuat secara khusus untuk para pemain yang selalu mengalami rungkad, boncos, dan kalah dalam bermain game slot. Akses demo slot x500 ini pun bisa langsung anda mainkan dengan akun pragmatic play demo. Anda yang sudah memiliki akun demo slot harus turut cobain game slot pragmatic play yang dijamin anti rungkad. Inilah deretan game slot demo x500 anti rungkad yang baru-baru ini dirilis ke dalam pragmatic play demo: Kalau dalam game slot para pemain hanya bisa memasang taruhan dan memutar slot, pada game Spaceman slot ini, teman super bisa menarik uang taruhan untuk mendapatkan keuntungan yang lebih sedikit, tetapi lebih aman. Untuk cara bermain game slot gacor spaceman, kalian bisa melihat dan mencoba cara bermain spaceman di situs resmi Spaceman Pragmatic.
    https://simoneumn958327.bloggactif.com/24942786/manual-article-review-is-required-for-this-article
    This is a subjective question, and one must consider various factors. For one, he has been relatively consistent in both live and online tournaments, coupled with his strategic approach that emphasizes learning, which makes him one of the best players. Will we see more victories from him in the future? We cannot say for sure, but we are excited to see what else Koon has up his poker sleeve. PokerStars is the only place where you can watch and play against Team PokerStars Pro – our group of elite pro players. Between them they have scores of World Series bracelets, EPT and WPT titles and more, adding up to millions in winnings. And now you can join them at the tables with PokerStars. WSOP Real Money Poker – Nevada Gone are the days when online poker players would only play Texas Hold’em and nothing else. As NLHE games become increasingly solved, online poker players are looking for alternative poker variants where the edge over their competition is more significant. In addition, different poker variants offer extra excitement and challenges. As a result, several online poker sites provide a large number of mixed games, including 6+, Omaha, Seven Card Stud, and Draw games. If you’re a Texas Hold ’em purist, this won’t be a factor, but if you enjoy mixed games, this is something to look out for.

  845. kig
    |

    Current slide of – Save on Eyelash & Eyebrow Growth Not a valid email! Current slide of – Top picked items desertcart is the best online shopping platform where you can buy Dr Lili Fan Probiotic X Lash Enhancer Lash Serum For Eyelash Growth And Thickness Natural Volumizing Lash Boost Treatment For Top And Bottom Lashes With Exclusive Peptide Complex Vegan Probiotic from renowned brand(s). desertcart delivers the most unique and largest selection of products from across the world especially from the US, UK and India at best prices and the fastest delivery time. * Must be applied to clean and dry skin to maintain product integrity. Would recommend Current slide of – Save on Eyelash & Eyebrow Growth You are now signed up to our email Current slide of – Best Selling in Eyelash & Eyebrow Growth
    https://buscodesdecasa.com/innovative-inspector-linq-atbeautyworld-than-in-art-supervisor/
    Cons: some users said it left buildup and residue Be sure to check out Vegamour’s Lash & Brow sale today! In other cases, non- natural eyelash serums can even change the colour of your iris! For some reason, the FDA has approved Latisse. This is an eyelash growth serum that does work, but often causes allergic reactions, darkening of the eyelids and iris colour changes due to the presence of its active ingredient, LUMIGAN®.On the other hand, there are plenty of natural alternatives with ingredients that can do wonders for your lashes. And indeed, they’ve been used for millennia! Eyelash serums improve the appearance and length of lashes, but they can also irritate sensitive skin. Steer clear of serums with edible ingredients like coconut and olive oil, as they can grow bacteria that can lead to eye infections and styes. And as with any new product, do a swatch test first to see how your skin will react. Dr. Greenfield suggests applying a very thin layer in the corner of the eyelash to see how your skin responds. If you notice irritation, immediately discontinue use and have your dermatologist give the area a look.

  848. Rastrear Celular
    |

    Localize por meio do software de sistema “Find My Mobile” que acompanha o telefone ou por meio de software de localização de número de celular de terceiros.

  1063. binance
    |

    Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.

  1105. sklep internetowy
    |

    Wow, wonderful blog structure! How long have you ever been running
    a blog for? you made running a blog glance easy. The
    entire look of your web site is great, let alone the content!

    You can see similar here sklep internetowy

  1115. sklep online
    |

    Hi! Do you know if they make any plugins to help
    with Search Engine Optimization? I’m trying to get my blog to rank for some
    targeted keywords but I’m not seeing very good results. If you know of any
    please share. Many thanks! You can read similar
    article here: Najlepszy sklep

  1123. easy jackpot
    |

    Amidst the hustle and bustle of life, your post is a moment of quiet reflection. Thank you for brightening my day.

  1132. e-commerce
    |

    Hello! Do you know if they make any plugins
    to help with Search Engine Optimization? I’m trying
    to get my blog to rank for some targeted keywords but I’m
    not seeing very good success. If you know of any please share.
    Thank you! You can read similar blog here: Najlepszy sklep

  1137. dobry sklep
    |

    Hello! Do you know if they make any plugins to help with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m
    not seeing very good results. If you know of
    any please share. Thanks! You can read similar blog here: Sklep internetowy

  1149. GSA Verified List
    |

    Hello there! Do you know if they make any
    plugins to help with Search Engine Optimization? I’m trying to get my website to rank for some targeted keywords but
    I’m not seeing very good success. If you know of
    any please share. Kudos! I saw similar text here: Link Building

Leave a Reply

Your email address will not be published. Required fields are marked *

Useful Links

GET IN TOUCH

  • B-9, 1st Floor, Sector-2, Noida, Uttar Pradesh 201301, India

  • (+91)9582545485

  • services@enthuons.com

  • Mon – Sat: 10:00 AM to 7:00 PM

© Enthuons Technologies Pvt Ltd All Rights Reserved

arrow-down