Welcome!

Machine Learning Authors: Pat Romanski, Elizabeth White, Yeshim Deniz, Liz McMillan, Ed Featherston

Related Topics: Machine Learning

Machine Learning : Article

Adding Rounded Corners to HTML with CSS

Using the Border Radius Setting in CSS 3

As the name implies, a Cascading Style Sheet, or CSS, is a document that describes the visual style of your content. Web designers have been leveraging Cascading Styles Sheets as a tool to control content placement and text presentation in web pages for over ten years.

With the advent of Web 2.0 applications, it is even more important to add control to your designs. The Webkit open source project, used in Apple’s Safari and Google’s Chrome, and Mozilla’s FireFox, recognize that CSS must be flexible enough to meet your design needs. To this end, there is now included in the latest versions advanced CSS styles. One of these new features is the ability to add rounded corners to objects.

Adding rounded corners is not a new technique for the web. The effect, however, is created through using images and tables to create the illusion of rounded corners. Adding images to the pages ensures that the page takes longer to load and makes modifying the page later more complex.

A simpler approach is to use the proposed Corner-Radius CSS definition that is currently supported in FireFox 3.0, Safari 3.0, Mobile Safari on your iPhone/iPod Touch and Google’s Chrome. The Corner-Radius definition is line you can add to your CSS style. The following HTML code has a style embedded that changes the presentation of the block of text to have rounded corners with a heavy, black outline:

<p style="-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 4px solid #FF0000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, lacus in cursus cursus, justo purus fringilla nisi, quis cursus urna velit vel felis. Nulla ac mi. Phasellus sodales dui vel tortor. Praesent dignissim. Vestibulum vulputate nibh rutrum purus. Nulla ante. Sed porta. Vestibulum commodo, mi nec tincidunt laoreet, urna risus ornare libero, in imperdiet sapien enim vel nisi.</p>

The style description has been highlighted in bold. Your content will now look like this on your Web page:

As you can see, the block of text now has a solid red line with rounded corners. It is this style description that controls the size of the radius, not an image. You can then easily modify the description as shown below:

-moz-border-radius: 10px

-webkit-border-radius: 10px

The standard is currently only in proposal stage and has not been adopted by all Web browsers. For this reason, you need to add two border-radius style descriptions: One, for FireFox (-moz-border-radius); and one for Safari/Chrome (-webkit-border-radius). Changing the value of the border-radius will change the size of the border. For instance:

Border-radius: 15 px

Border-radius:25 px

Border-radius:45 px

As you increase the border radius, you will also have to add additional styles, such as padding, to ensure that your border does not cut through your text as is shown in the example of border-radius:45 px. Here is how you can add padding to manage your style.

<p style="-moz-border-radius: 45px;-webkit-border-radius: 45px;border: 4px solid #FF0000;padding: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, lacus in cursus cursus, justo purus fringilla nisi, quis cursus urna velit vel felis. Nulla ac mi. Phasellus sodales dui vel tortor. Praesent dignissim. Vestibulum vulputate nibh rutrum purus. Nulla ante. Sed porta. Vestibulum commodo, mi nec tincidunt laoreet, urna risus ornare libero, in imperdiet sapien enim vel nisi.</p>

The content now looks like this:

Creating interactive tabs

The new border-radius style also has the option of allowing you to control which corner you want the border to appear on. This can be useful when you want to create tabs for you web page. For instance, the following style will add tabs to the top left and top right corners:

.standardTabEffect{

font-family: Arial, Helvetica, sans-serif;

font-size: 15px;

background-color: #FFFF00;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 15px;

-webkit-border-radius-topleft: 15px;

-webkit-border-radius-topright: 15px;

border: 4px solid #FF0000;

padding: 10px;

color: #FF0000;

text-decoration: none;

font-weight: bold;

}

This style can now be added to a central style sheet link to content on your page. The content on your page can now reference the style. You can add the following HTML to see this effect:

<a class="standardTabEffect" href="#">This is Tab 1</a><a class="standardTabEffect" href="#">This is Tab 2</a><a class="standardTabEffect" href="#">This is Tab 3</a>

When you view the page, the HTML above will look like this:

As you might imagine, you can inherit existing CSS formatting into your border-radius designs. For instance, you can add a simple roll over effect when you include the following style description. The important part is to add the “:hover” parameter. This instructs the Web browser to only use this style when a user is rolling over the link with their mouse:

.standardTabEffect:hover{

background-color: #FF0000;

border: 4px solid #FFFF00;

color: #FFFF00;

}

The action looks like this:

Without using complex images or tables, you have created a series of tabs that can be easily managed through your CSS and HTML.

The Caveat
Applying rounded corners to your design is a must for almost any Web site. There are some caveats, however, to using rounded corners in CSS. The first one is a biggie: NO VERSION OF MICROSOFT’S INTERNET EXPLORER SUPPORTS CSS CORNERS. Microsoft does a good job of talking up their support for CSS, but what they fail to mention is their lack of support for advanced CSS3 standards. Unfortunately, this is a big caveat for many designers at 70% of all Internet users are coming to your site using Internet Explorer.

More Stories By Matthew David

Matthew has written books for Friends of Ed, Pearson Press, New Riders, Wiley, Focal Press and Peach Pit. He is also experience at leading teams top deliver bestselling titles books that come with accompanying video training and media. An example is Flash MX Magic, a book written by 7 authors, with an accompanying web site and CD. The book sold over 45,000 copies in 12 languages. Matthew is also the author of 400+ articles.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@CloudExpo Stories
Data scientists must access high-performance computing resources across a wide-area network. To achieve cloud-based HPC visualization, researchers must transfer datasets and visualization results efficiently. HPC clusters now compute GPU-accelerated visualization in the cloud cluster. To efficiently display results remotely, a high-performance, low-latency protocol transfers the display from the cluster to a remote desktop. Further, tools to easily mount remote datasets and efficiently transfer...
Though cloud is the future of enterprise computing, a smooth transition of legacy applications and systems is critical for seamless business operations. IT professionals are eager to start leveraging the cost, scale and other benefits of cloud, but with massive investments already in place in existing infrastructure and a number of compliance and resource hurdles, it can be challenging to move to a cloud-based infrastructure.
SYS-CON Events announced today that Avere Systems, a leading provider of enterprise storage for the hybrid cloud, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere delivers a more modern architectural approach to storage that doesn't require the overprovisioning of storage capacity to achieve performance, overspending on expensive storage media for inactive data or the overbui...
Containers are rapidly finding their way into enterprise data centers, but change is difficult. How do enterprises transform their architecture with technologies like containers without losing the reliable components of their current solutions? In his session at @DevOpsSummit at 21st Cloud Expo, Tony Campbell, Director, Educational Services at CoreOS, will explore the challenges organizations are facing today as they move to containers and go over how Kubernetes applications can deploy with lega...
SYS-CON Events announced today that Avere Systems, a leading provider of hybrid cloud enablement solutions, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere Systems was created by file systems experts determined to reinvent storage by changing the way enterprises thought about and bought storage resources. With decades of experience behind the company’s founders, Avere got its ...
Amazon is pursuing new markets and disrupting industries at an incredible pace. Almost every industry seems to be in its crosshairs. Companies and industries that once thought they were safe are now worried about being “Amazoned.”. The new watch word should be “Be afraid. Be very afraid.” In his session 21st Cloud Expo, Chris Kocher, a co-founder of Grey Heron, will address questions such as: What new areas is Amazon disrupting? How are they doing this? Where are they likely to go? What are th...
Today most companies are adopting or evaluating container technology - Docker in particular - to speed up application deployment, drive down cost, ease management and make application delivery more flexible overall. As with most new architectures, this dream takes significant work to become a reality. Even when you do get your application componentized enough and packaged properly, there are still challenges for DevOps teams to making the shift to continuous delivery and achieving that reducti...
As hybrid cloud becomes the de-facto standard mode of operation for most enterprises, new challenges arise on how to efficiently and economically share data across environments. In his session at 21st Cloud Expo, Dr. Allon Cohen, VP of Product at Elastifile, will explore new techniques and best practices that help enterprise IT benefit from the advantages of hybrid cloud environments by enabling data availability for both legacy enterprise and cloud-native mission critical applications. By rev...
The next XaaS is CICDaaS. Why? Because CICD saves developers a huge amount of time. CD is an especially great option for projects that require multiple and frequent contributions to be integrated. But… securing CICD best practices is an emerging, essential, yet little understood practice for DevOps teams and their Cloud Service Providers. The only way to get CICD to work in a highly secure environment takes collaboration, patience and persistence. Building CICD in the cloud requires rigorous ar...
Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, will discuss how they b...
SYS-CON Events announced today that SkyScale will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. SkyScale is a world-class provider of cloud-based, ultra-fast multi-GPU hardware platforms for lease to customers desiring the fastest performance available as a service anywhere in the world. SkyScale builds, configures, and manages dedicated systems strategically located in maximum-security...
As you move to the cloud, your network should be efficient, secure, and easy to manage. An enterprise adopting a hybrid or public cloud needs systems and tools that provide: Agility: ability to deliver applications and services faster, even in complex hybrid environments Easier manageability: enable reliable connectivity with complete oversight as the data center network evolves Greater efficiency: eliminate wasted effort while reducing errors and optimize asset utilization Security: imple...
High-velocity engineering teams are applying not only continuous delivery processes, but also lessons in experimentation from established leaders like Amazon, Netflix, and Facebook. These companies have made experimentation a foundation for their release processes, allowing them to try out major feature releases and redesigns within smaller groups before making them broadly available. In his session at 21st Cloud Expo, Brian Lucas, Senior Staff Engineer at Optimizely, will discuss how by using...
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lead...
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japanese Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ruby Development Inc. builds new services in short period of time and provides a continuous support of those services based on Ruby on Rails. For more information, please visit https://github.com/RubyDevInc.
When it comes to cloud computing, the ability to turn massive amounts of compute cores on and off on demand sounds attractive to IT staff, who need to manage peaks and valleys in user activity. With cloud bursting, the majority of the data can stay on premises while tapping into compute from public cloud providers, reducing risk and minimizing need to move large files. In his session at 18th Cloud Expo, Scott Jeschonek, Director of Product Management at Avere Systems, discussed the IT and busine...
As businesses evolve, they need technology that is simple to help them succeed today and flexible enough to help them build for tomorrow. Chrome is fit for the workplace of the future — providing a secure, consistent user experience across a range of devices that can be used anywhere. In her session at 21st Cloud Expo, Vidya Nagarajan, a Senior Product Manager at Google, will take a look at various options as to how ChromeOS can be leveraged to interact with people on the devices, and formats th...
Is advanced scheduling in Kubernetes achievable? Yes, however, how do you properly accommodate every real-life scenario that a Kubernetes user might encounter? How do you leverage advanced scheduling techniques to shape and describe each scenario in easy-to-use rules and configurations? In his session at @DevOpsSummit at 21st Cloud Expo, Oleg Chunikhin, CTO at Kublr, will answer these questions and demonstrate techniques for implementing advanced scheduling. For example, using spot instances ...
First generation hyperconverged solutions have taken the data center by storm, rapidly proliferating in pockets everywhere to provide further consolidation of floor space and workloads. These first generation solutions are not without challenges, however. In his session at 21st Cloud Expo, Wes Talbert, a Principal Architect and results-driven enterprise sales leader at NetApp, will discuss how the HCI solution of tomorrow will integrate with the public cloud to deliver a quality hybrid cloud e...